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

如何使用javascript定位特定表单

1 个答案: