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?

you mean $('#myForm').find(":submit").removeAttr("disabled") ? — Mivaweb
– Mivaweb, Commented Jun 26, 2015 at 8:36
You can select forms by id just like you are selecting fields. If you mean fields in just one form, you can select children of your form $('#formId #childid') (but you shouldn't be re-using ids anyway). — Collin Green
– Collin Green, Commented Jun 26, 2015 at 8:37
$("#first_name").val() will always evaluate to true (or truthy), even if it's only an empty string. Incidentally, while we can all read your code and guess what it is that you're trying to do, it's better (and, really, a requirement) that you explain what it is that you're trying to do. — David Thomas
– David Thomas, Commented Jun 26, 2015 at 8:37

Barmar · Accepted Answer · 2015-06-26 08:44:52Z

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() == "");
});

Collectives™ on Stack Overflow

How to target a specific form using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related