How to target a specific form using javascript

Question

Here is my javaScript:

<script type="text/javascript">
    $(function () {

        $('#first_name, #second_name, #third_name, #fourth_name').bind("change keyup",
  function () {      
      if ($("#first_name").val() && $("#second_name").val() != "" && $("#third_name").val() != "" && $("#fourth_name").val() != "")
          $(this).closest("form").find(":submit").removeAttr("disabled");
      else
          $(this).closest("form").find(":submit").attr("disabled", "disabled");      
      });
        });
</script>

And here is my HTML:

<form method="post" id="myForm" name="myForm">
     <div id="terms_area">
           <ul>
                <li>
                    <label>Print your name</label>
                    <input id="first_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input id="second_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input id="third_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input id="fourth_name" type="text" />    
                </li>
           </ul>
           <center>    
                <input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
           </center>                  
     </div>                                              
</form>

Is there any way I can get the JavaScript to target the form name of 'myForm' as I have multiple forms on one page?

Answer 1

IDs have to be unique, and an ID selector will always target the first element with that ID on the page. Reusing IDs in different forms won't work. Use classes instead.

<form method="post" id="myForm" name="myForm">
     <div id="terms_area">
           <ul>
                <li>
                    <label>Print your name</label>
                    <input class="first_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input class="second_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input class="third_name" type="text" />    
                </li>

                <li>
                    <label>Print your surname</label>
                    <input class="fourth_name" type="text" />    
                </li>
           </ul>
           <center>    
                <input class="terms_button" type="submit" value="I accept the terms of this agreement" disabled title="please fill in all required fields to accept the terms" />
           </center>                  
     </div>                                              
</form>

Then you can target the elements in a specific form with:

$("#myForm").find(".first_name, .second_name, .third_name, .fourth_name").on("change keyup", function() {
    $("#myForm :submit").prop("disabled", 
        $("#myForm .first_name").val() == "" || 
        $("#myForm .second_name").val() == "" || 
        $("#myForm .third_name").val() == "" || 
        $("#myForm .fourth_name").val() == "");
});