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;
    }
  });
});