Alternative to many if / else statements in JS / JQuery?

Question

I try to compare many elements of the page with their initial values ​​with what they change by the user, to suggest that they save, etc.

Is there a better way to do this check without many if / else statements? The switch does not work, since there are many different values ​​that are checked, and not one, in many cases. Any tips and pointers are welcome, thanks!

if ($('#InitialhidLeadType').val() != $('#hidLeadType').val()) bIsChange = true; else if ($('#InitialhidProductType').val() != $('#hidProductType').val()) bIsChange = true; else if ($('#InitialhidFixedFilterType').val() != $('#hidFixedFilterType').val()) bIsChange = true; else if ($('#InitialhidMinCreditScore').val() != $('#hidMinCreditScore').val()) bIsChange = true; else if ($('#InitialhidMaxCreditScore').val() != $('#hidMaxCreditScore').val()) bIsChange = true; else if ($('#InitialhidMinLoanAmount').val() != $('#hidMinLoanAmount').val()) bIsChange = true; else if ($('#InitialhidMinLTV').val() != $('#hidMinLTV').val()) bIsChange = true; else if ($('#InitialhidMaxLTV').val() != $('#hidMaxLTV').val()) bIsChange = true; else if ($('#InitialhidMinCLTV').val() != $('#hidMinCLTV').val()) bIsChange = true; else if ($('#InitialhidMaxCLTV').val() != $('#hidMaxCLTV').val()) bIsChange = true; else if ($('#InitialhidPropertyType').val() != $('#hidPropertyType').val()) bIsChange = true; else if ($('#InitialhidPropertyUse').val() != $('#hidPropertyUse').val()) bIsChange = true; else if ($('#InitialhidBankruptcy').val() != $('#hidBankruptcy').val()) bIsChange = true; else if ($('#InitialhidForeclosure').val() != $('#hidForeclosure').val()) bIsChange = true; else if ($('#InitialhidLoanPurpose').val() != $('#hidLoanPurpose').val()) bIsChange = true; else if ($('#InitialhidIsCashout').val() != $.trim($('#hidIsCashout').val())) bIsChange = true; else if ($('#InitialhidNoCreditScore').val() != $.trim($('#hidNoCreditScore').val())) bIsChange = true; else if ($('#InitialhidRelationship').val() != $.trim($('#hidRelationship').val())) bIsChange = true; else if ($('#InitialhidCurrentLoanVA').val() != $.trim($('#hidCurrentLoanVA').val())) bIsChange = true; else if ($('#InitialhidFoundHome').val() != $.trim($('#hidFoundHome').val())) bIsChange = true; else if ($('#InitialhidFHA').val() != $.trim($('#hidFHA').val())) bIsChange = true; else if ($('#InitialhidIsConforming').val() != $.trim($('#hidIsConforming').val())) bIsChange = true; else if ($('#InitialhidMSA').val() != $('#hidMSA').val()) bIsChange = true; else if ($('#InitialhidStatedCreditRating').val() != $('#hidStatedCreditRating').val()) bIsChange = true; else if ($('#InitialhidCampEffectivedate').val() != $('#hidCampEffectivedate').val()) bIsChange = true; else if ($('#InitialhidCampExpirationdate').val() != $('#hidCampExpirationdate').val()) bIsChange = true; else if ($('#InitialhidIsFixedFilter').val() != $('#hidIsFixedFilter').val()) bIsChange = true; else if ($('#InitialhidTestCompaign').val() != $('#hidTestCompaign').val()) bIsChange = true; else if ($('#InitialhidSelectedStates').val() != $('#hidSelectedStates').val()) bIsChange = true; else if ($('#InitialhidVolumeTieredPricing').val() != $('#hidVolumeTieredPricing').val()) bIsChange = true; else if ($('#InitialhidWeekDayCapacity').val() != $('#filterCapacity').val()) bIsChange = true; else if ($('#InitialhidWeekendCapacity').val() != $('#filterCapacityWeekEnd').val()) bIsChange = true; else if ($('#InitialhidHolidayCapacity').val() != $('#filterCapacityHoliday').val()) bIsChange = true; ///////////////////////////////////// HTML Below ////////////////////////////////////// <div id = "changeCheck"> <asp:HiddenField ID="InitialhidLeadType" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidProductType" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidFixedFilterType" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMinCreditScore" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMaxCreditScore" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMinLoanAmount" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMaxLoanAmount" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMinLTV" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMaxLTV" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMinCLTV" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMaxCLTV" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidWeekDayCapacity" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidWeekEndCapacity" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidHolidayCapacity" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidPropertyType" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidPropertyUse" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidBankruptcy" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidForeclosure" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidLoanPurpose" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidIsCashout" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidNoCreditScore" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidRelationship" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidCurrentLoanVA" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidFoundHome" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidFHA" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidIsConforming" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidMSA" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidStatedCreditRating" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidCampEffectivedate" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidCampExpirationdate" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidIsFixedFilter" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidTestCompaign" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidSelectedStates" ClientIDMode="Static" runat="server" /> <asp:HiddenField ID="InitialhidVolumeTieredPricing" ClientIDMode="Static" runat="server" /> 

Answer 1

Iterate over the elements, compare them, and if there are changes, suggest the user to save:

 var save = false; $('[id^="Initial"]').each(function() { if ( this.value != $('#'+this.id.replace('Initial','')).val()) save = true; }); if (save) confirm(' would you like to save '); 

Normally, you would solve it in a different way by changing the variable when the element is changed, rather than checking all the elements for some time:

 var save = false; $(':input').on('change', function() { save = true; }); window.onbeforeunload = function() { if (save) confirm(' would you like to save '); } 

Answer 2

Change your approach. Instead of checking all change values, capture the change event for your form to set its flag when input changes:

 $('#some-form-element').on('change', function (e) { // ... set flag here }); 

Answer 3

This will tell you if any form elements have changed at any time.

 var formIsDirty = false; $(document).ready(function() { $(':input').change(function() { formIsDirty = true; }); }); 

Of course, if they change the value back to the original value, this will not tell you about it. If this is not enough, you can do this:

 $(document).ready(function() { $(':input').each(function() { $(this).data('original', $(this).val()); }); }); 

Then when you check:

  var formIsDirty = false; $(':input').each(function() { if ($(this).data('original') != $(this).val()) { formIsDirty = true; return false; } }); 

The second option will allow you to do away with your "initial values" hidden fields.

Answer 4

Try the following:

 var map = [ ['#InitialhidLeadType', '#hidLeadType'], ['#InitialhidProductType', '#hidProductType'], ['#InitialhidFixedFilterType', '#hidProductType'] // etc.. ]; for (var i = 0; i < map.length; i++) { if ($(map[i][0]).val() != $(map[i][1]).val()) { bIsChange = true; break; } } 

Answer 5

I would say that the combination of the two approaches proposed by adeneo and ACEfanatic02., With a twist:

 $("input:visible").change(function() { var currID = $(this).prop("id"); var initialValContainer = $("#Initial" + currID); if (initialValContainer.length > 0) { var currVal = $.trim($(this).val()); var initialVal = $.trim(initialValContainer.val()); if (currVal === initialVal) { $(this).addClass("changed"); } else { $(this).removeClass("changed"); } } }); 

At this point, when you are ready to check whether you want to save, you can use the following code to find out if this is necessary:

 if ($(".changed").length > 0) { **prompt to save** } 

Thus, the code will only ask if at least one of the inputs has been marked as changed. This approach will also allow you to enter "untag", which the user returns to their original value, as well as "reset" all inputs if you need with $(".changed").removeClass("changed") (for example, if you save new values ​​without reloading the page).