加载页面时检查文本框的默认值更改

Question

I have a two forms on a page.

The first one has several quantity text boxes that are populated with their respective default values on page load, which can obviously change. Also there may be 1, 2 ,3 or more of these text boxes on the page, so a script would have to account for this. Each text box will have a sequential name of "Quantity1, Quantity2, etc" and the id will be the same as well.

What I want to do it check to see if any of these have been changed from their default value and when either button is clicked on in the second form, it is to do the first form's button not the second form's button action.

Now if there were no changes in any of the input text boxes, then the second form's buttons can and should act as normal. Is this possible and if so a jquery method is preferred?

Note: I stripped out a lot of unnecessary code here so only the relevant stuff is shown.

<form method="POST" name="form" action="ShoppingCart.asp" onsubmit="if (typeof(Update_Hidden_State_Fields)=='function') Update_Hidden_State_Fields(); if (this.submitted) return false; else {this.submitted=true; return true;}">
<td><center><input type="text" maxlength="7" size="5" value="5" name="Quantity1" id="Quantity1"><center></td>
<td><center><input type="text" maxlength="7" size="5" value="2" name="Quantity2" id="Quantity2"><center></td> 
<td><center><input type="text" maxlength="7" size="5" value="5" name="Quantity3" id="Quantity3"><center></td>
<td width="135" align="right"><input border="0" type="image" id="btnRecalculate" name="btnRecalculate" src="v/vspfiles/templates/100/images/buttons/btn_recalculate.gif" alt="Recalculate Totals"></td>

Here is the form that when either button inside it is clicked on and any of the input boxes in the above forms have changed to do the first forms button action.

<form name="Proceed_To_Checkout_Form" method="post" action="https://www.dothisurl.com/login.asp">
<td><input type="image" src="v/vspfiles/templates/100/images/buttons/btn_checkout_guest.gif" name="btn_checkout_guest"></td>
<td><input type="image" src="v/vspfiles/templates/100/images/buttons/btn_checkout_guest.gif" name="btn_checkout_guest"></td>

Answer 1

I'll make a try :

$(function(){
  $("[id^='Quantity']").each(function(){
    $(this).data('default', $(this).val());
  });

  $("[name='Proceed_To_Checkout_Form']").submit(function(){
    var hasChanged = false;
    $("[id^='Quantity']").each(function(){
      if($(this).val() != $(this).data('default')){
        hasChanged = true;
      }
    });
    if(hasChanged){
      $("#btnRecalculate").click();
      return false;
    }
  });
});

Answer 2

On page load, you could store the current values of the fields (these would be the default values, I assume) into a local js variable - most likely an array, to handle the fact that there might be 1, 2, or 3 values to be stored. Once you have those default values stored, the rest should be relatively easy:

When a button is clicked on Form2, its implementation compares the relevant field's current value to its default value (the one you stored when the page loaded). If they're the same, do your normal processing. If they're different, do the "exception case" processing you need.

Hopefully I understood your question correctly, and this approach gets you on the right track. I'll keep an eye on this thread, if you need me to throw together some code examples/snippets.