Jquery 投稿二 forms

Question

我有兩個 forms，其中一個經過驗證，它隱藏並顯示下一個表單，然后提交。 然而，通過這樣做，它只發布了一個 forms 個變量。

我想出了一個解決方案，將表單 1 輸入輸入到 form2 中的隱藏輸入，但我想知道是否有更好的解決方案，因為最終會添加更多的輸入。

Html：

<div name="div1" style="display:block;">
<label>Div1</label>
    <form name="form1" method="post">
        <input type="text" name="testa">
        <input type="text" name="testb">
        <input type="submit" value="Submit">
    </form>
</div>

<div name="div2" style="display:none;">
<label>Div2</label>
    <form name="form2" method="post">
        <input type="" name="testa">
        <input type="" name="testb">
        <input type="text" name="testc">
        <input type="text" name="testd">
        <input type="submit" value="Submit">
    </form>
</div>

js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
  $("form[name='form1']").validate({
    rules: {
      testa: "required",
      testb: "required"
    },
    submitHandler: function(form) {
        //form.submit();
        alert('Going to next step...');
        var value1 = $('input[name="testa"]').val();
        var value2 = $('input[name="testb"]').val();
        $('input[name="testa"]').val(value1);
        $('input[name="testb"]').val(value2);
        $('[name="div1"]').hide();
        $('[name="div2"]').show();
        return false;
    }
  });
});

$(document).ready(function () {
  $("form[name='form2']").validate({
    rules: {
      testc: "required",
      testd: "required"
    },
    submitHandler: function(form) {
        alert('Submitting');
        form.submit();
    }
  });
});
</script> 

Answer 1

首先，您沒有正確使用label元素。 它需要一個for屬性，該屬性的值是 label 是“for”的表單元素的id ，或者它需要包裝它所針對的元素。

接下來， div元素沒有name屬性。 只有能夠並且將要通過表單提交提交數據的表單域才能有name 。

此外，不需要多個 JQuery document.ready()處理程序。 您可以將文檔准備就緒時要運行的所有代碼放在單個document.ready()中。 說到 JQuery，除非您需要一些非常特定於 JQuery 驗證庫的東西，否則常規 HTML 可以做與您正在做的相同的事情，但沒有 JQuery。您可以將required屬性添加到所需的元素。

並且，您不應該對表單中的多個元素使用相同的name ，但復選框和單選按鈕除外，因為它們充當相關選擇的組。

至於您的主要問題，只需使用一個form ，但根據需要隱藏其中的部分。 最好使用fieldset元素定義表單的各個部分，這也有助於提高可訪問性。

 $(document).ready(function () { $("form[name='form']").validate({ rules: { test1a: "required", test1b: "required", test2a: "required", test2b: "required" }, submitHandler: function(form) { //form.submit(); alert('Going to next step...'); var value1 = $('input[name="testa"]').val(); var value2 = $('input[name="testb"]').val(); $('input[name="testa"]').val(value1); $('input[name="testb"]').val(value2); $('#first').hide(); $('#second').show(); return false; } }); });

 .hidden { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script> <form name="form" method="post"> <fieldset id="first"> <legend>First Set of Questions</legend> <input type="text" name="test1a"> <input type="text" name="test1b"> <input type="submit" value="Submit"> </fieldset> <fieldset id="second" class="hidden"> <legend>Second Set of Questions</legend> <input type="" name="test2a"> <input type="" name="test2b"> <input type="text" name="testc"> <input type="text" name="testd"> <input type="submit" value="Submit"> </fieldset> </form>