javascript - 如何使用 javascript 定位特定表单

Question

这是我的 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>

这是我的 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>

由于我在一个页面上有多个表单，有什么方法可以让 JavaScript 定位“myForm”的表单名称？

Answer 1

ID 必须是唯一的，ID 选择器将始终定位页面上具有该 ID 的第一个元素。以不同形式重复使用 ID 是行不通的。请改用类。

<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>

然后您可以通过以下方式定位特定表单中的元素:

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