以兩種形式發布數據，第一種形式在填寫第二種形式之前不會發送任何數據

Question

基本上我有兩種形式。 我想讓用戶在注冊時填寫第一批信息。 按下一步（提交），然后填寫第二批信息。 他們按下注冊后，提交兩組POST信息。

我所擁有的是-具有兩種不同形式的兩個部分（將其分為兩種形式的原因-該網站外觀的一部分）：

<section class="first">
    <header>
        <h1>Signup 1/2</h1>
    </header>
      <form id="firstForm">
          <label>First Name</label>
          <input type="text" class="input-text" value="" name="firstName" required />
          <label>Surname</label>
          <input type="text" class="input-text" value="" name="Surname" required />
          <label>Username</label>
          <input type="text" class="input-text" value="" name="Username" required />
        <input type="submit" name="firstSubmit" value="next"/>
      </form>
</section>
<section class="second">
    <header>
        <h1>Signup 2/2</h1>
    </header>
      <form name="secondForm" class="clearfix">
          <label>Your Email</label>
          <input type="email" class="input-text" value="" name="email" required />
          <label>Password</label>
          <input type="text" class="input-text" value="" name="password" required />
        <input type="submit" name="secondSubmit" value="Register" />
      </form>
</section>

因此，第二部分是隱藏的，直到用戶單擊下一個按鈕（提交）。 我有javascript阻止它提交，並隱藏了第一部分，並使第二部分出現：

<script type="text/javascript">
$("#firstForm").bind("submit", nextForm);
function nextForm() {
    $('.first').css("display", "none");
    $('.second').css("display", "block");
    return false;
}

這可行。 然后，我的問題是讓secondForm提交，但是同時發布第一和第二個信息，就像使用一個提交按鈕一樣，我同時提交了這兩個信息。 這可能嗎？ 如果是這樣，怎么辦？

要使用GET方法，我會去：

$("#secondForm").bind("submit", submitForm);
function submitForm() {
    document.getElementById("firstForm").submit();  
    document.getElementById("secondForm").submit();         
}

但我不想這樣做，因為GET =敏感信息的好主意。

Answer 1

我將使用一種形式，但將兩組輸入包裝在div中。 只需隱藏第一個div，然后在第一次單擊按鈕時顯示第二個div（您將不會保留它作為提交按鈕），然后在第二次單擊按鈕時提交整個表單。