I’ve got four (4) DropDownList controls that determine what data is shown on a form:
<table style="width: 100%">
<tr>
<th style="min-width: fit-content;"></th>
<th style="width: 20%;">Selection</th>
<th style="width: 50%;">@Model.SelectionSummary</th>
</tr>
<tr>
<td align="right">By Model/By Month:</td>
<td>
@Html.DropDownListFor(m => m.ByModel,
new List<SelectListItem>() {
new SelectListItem() { Text = "", Value = "" },
new SelectListItem() { Text = "By Model", Value = "Model" },
new SelectListItem() { Text = "By Month", Value = "Month" }
}, new { @onchange = "updateForm('1')" })
</td>
<td>@Model.ByModel</td>
</tr>
<tr>
<td align="right">By Region/By Dealer/ All Regions:</td>
<td>
@Html.DropDownListFor(
m => m.ByRegion,
new List<SelectListItem>() {
new SelectListItem() { Text = "", Value = "" },
new SelectListItem() { Text = "By Region", Value = "Region" },
new SelectListItem() { Text = "By Dealer", Value = "Dealer" },
new SelectListItem() { Text = "All Regions", Value = "All" }
},
new { @id = "ByRegion", @onchange = "updateForm('2')" })
</td>
<td>@Model.ByRegion</td>
</tr>
<tr>
<td align="right">Region:</td>
<td>
@Html.DropDownListFor(
m => m.Region,
Model.Regions,
new { @onchange = "updateForm('3')" }
)
</td>
<td>@Model.Region</td>
</tr>
<tr>
<td align="right">Dealership:</td>
<td>
@Html.DropDownListFor(
m => m.DealerID,
Model.Dealerships,
new { @id = "DealerID", @onchange = "updateForm('4')" }
)
</td>
<td>@Model.Dealership</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" class="submit" onclick="showLoading()" /></td>
<td>Report for: @($"{DateTime.Now}")</td>
</tr>
</table>
Whenever an item changes in the first “By Model/By Month” DropDownList, the other three (3) lists below it are cleared.
Whenever an item changes in the second “By Region/By Dealer/ All Regions” DropDownList, all of the controls below it are cleared.
The Javascript for that is here:
const updateForm = (changeElement) => {
let byModel = document.getElementById("ByModel");
let byRegion = document.getElementById("ByRegion");
let region = document.getElementById("Region");
let dealership = document.getElementById("DealerID");
let currentDealership = "@Model.DealerID";
window.byModel = byModel;
window.byRegion = byRegion;
window.region = region;
window.dealership = dealership;
window.currentDealership = currentDealership;
if (changeElement === null) {
byModel.value = '';
byRegion.value = '';
region.value = '';
dealership.value = '';
}
if (changeElement === '1') {
byRegion.value = '';
region.value = '';
dealership.value = '';
}
//if All Regions is selected submit the form - previous functionality
if (changeElement === '2') {
if ((byRegion.value === 'All') && (0 < byModel.value.length)) {
region.innerHTML = "";
$loading.show();
document.forms[0].submit();
$loading.hide();
}
}
//Removes dealership value when region is changed, used in logic below
if (changeElement === '3') {
dealership.value = "";
$.get("@Url.Action("GetDealers", "Admin")?region=");
}
//Removes dealer list if ByRegion is anything other than By Dealer and dealership is not blank
//This is used for when the form submits to refresh the list without needing to interact with the dropdowns
if (byRegion.value !== "Dealer" && dealership.value.length > 0) {
dealership.innerHTML = "";
}
//Checks that region has a value and dealership does not (because this function is run on page load/refresh)
//Pulls in dealer values
if (0 < region.value.length && byRegion.value === "Dealer" && dealership.value.length < 1) {
getDealers(region);
}
if ((changeElement != '4') && (0 < currentDealership.length)) {
setTimeout(() => {
dealership.value = currentDealership;
}, 1000);
}
}
window.onload = function refreshForm() {
updateForm();
}
The form works fine until it is submitted. After the data returns, the Javascript no longer fires whenever the DropDownLists are changed.
Why does the Javascript stop working after data is returned?