Using Javascript, I want to show a list of months and years, then utilize the selection from each to create a filename in the pattern month_year.pdf before displaying the file.
In order to select a different file, I also need to be able to reset the choices. There is no need to select a month because for two of the years (2001 and 2006), there is just one option available (January and December, respectively).
For every other year, all twelve months are applicable. Since I'm not too familiar with Javascript, I could use some assistance. Thank you in advance for any assistance.
I've searched through instances, but nothing that seems pertinent has come up. Most solutions seem to dwell on drop-down lists. Pls help me.
Show a list of months and years
-
cleoraveum
- Messages : 1
- Enregistré le : 07 juin 2024, 04:06
-
triathlonherald
- Messages : 2
- Enregistré le : 12 juin 2024, 03:38
Re: Show a list of months and years
We'll create dropdown menus (select elements) for the user to choose the year and month, and a button to generate the filename. We'll also include a reset button to clear the selections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Month-Year File Generator</title>
</head>
<body>
<h1>Select Month and Year to Generate Filename</h1>
<label for="year">Year:</label>
<select id="year">
<option value="">Select Year</option>
<option value="2001">2001</option>
<option value="2006">2006</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<!-- Add more years as needed -->
</select>
<label for="month">Month:</label>
<select id="month">
<option value="">Select Month</option>
</select>
<button id="generate">Generate Filename</button>
<button id="reset">Reset</button>
<h2>Filename: <span id="filename"></span></h2>
<script src="script.js"></script>
</body>
</html>
JavaScript
We'll write the JavaScript to handle the dynamic changes in the month dropdown based on the selected year, generate the filename, and reset the selections.
document.addEventListener('DOMContentLoaded', function() {
const yearSelect = document.getElementById('year');
const monthSelect = document.getElementById('month');
const filenameDisplay = document.getElementById('filename');
const generateButton = document.getElementById('generate');
const resetButton = document.getElementById('reset');
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const specialYears = {
"2001": ["January"],
"2006": ["December"]
};
function populateMonthSelect(year) {
monthSelect.innerHTML = '<option value="">Select Month</option>';
if (specialYears[year]) {
specialYears[year].forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = month;
monthSelect.appendChild(option);
});
} else {
months.forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = month;
monthSelect.appendChild(option);
});
}
}
yearSelect.addEventListener('change', function() {
populateMonthSelect(yearSelect.value);
});
generateButton.addEventListener('click', function() {
const selectedYear = yearSelect.value;
const selectedMonth = monthSelect.value;
if (selectedYear && selectedMonth) {
const filename = `${selectedMonth}_${selectedYear}.pdf`;
filenameDisplay.textContent = filename;
} else {
alert('Please select both month and year.');
}
});
resetButton.addEventListener('click', function() {
yearSelect.value = "";
monthSelect.innerHTML = '<option value="">Select Month</option>';
filenameDisplay.textContent = "";
});
});
tiny fishing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Month-Year File Generator</title>
</head>
<body>
<h1>Select Month and Year to Generate Filename</h1>
<label for="year">Year:</label>
<select id="year">
<option value="">Select Year</option>
<option value="2001">2001</option>
<option value="2006">2006</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<!-- Add more years as needed -->
</select>
<label for="month">Month:</label>
<select id="month">
<option value="">Select Month</option>
</select>
<button id="generate">Generate Filename</button>
<button id="reset">Reset</button>
<h2>Filename: <span id="filename"></span></h2>
<script src="script.js"></script>
</body>
</html>
JavaScript
We'll write the JavaScript to handle the dynamic changes in the month dropdown based on the selected year, generate the filename, and reset the selections.
document.addEventListener('DOMContentLoaded', function() {
const yearSelect = document.getElementById('year');
const monthSelect = document.getElementById('month');
const filenameDisplay = document.getElementById('filename');
const generateButton = document.getElementById('generate');
const resetButton = document.getElementById('reset');
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const specialYears = {
"2001": ["January"],
"2006": ["December"]
};
function populateMonthSelect(year) {
monthSelect.innerHTML = '<option value="">Select Month</option>';
if (specialYears[year]) {
specialYears[year].forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = month;
monthSelect.appendChild(option);
});
} else {
months.forEach(month => {
const option = document.createElement('option');
option.value = month;
option.textContent = month;
monthSelect.appendChild(option);
});
}
}
yearSelect.addEventListener('change', function() {
populateMonthSelect(yearSelect.value);
});
generateButton.addEventListener('click', function() {
const selectedYear = yearSelect.value;
const selectedMonth = monthSelect.value;
if (selectedYear && selectedMonth) {
const filename = `${selectedMonth}_${selectedYear}.pdf`;
filenameDisplay.textContent = filename;
} else {
alert('Please select both month and year.');
}
});
resetButton.addEventListener('click', function() {
yearSelect.value = "";
monthSelect.innerHTML = '<option value="">Select Month</option>';
filenameDisplay.textContent = "";
});
});
tiny fishing
-
bekeanloinse56
- Messages : 2
- Enregistré le : 23 déc. 2024, 04:45
Re: Show a list of months and years
I am also struggling with what you are going fnf through. If you find a solution please let me know.