以两种形式发布数据，第一种形式在填写第二种形式之前不会发送任何数据

Question

Basically I have two forms. I want to have a user upon registration fill out the first lot of information. Press next (submit), then fill out the second lot of information. Once they press register, submit both sets of POST information.

What I have is this - two sections with two different forms (there's a reason why these are split into two forms - part of the look of the site):

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

So the second section is hidden until the user clicks the next button (submit). I have javascript stopping it from submitting, and hiding the first section, and making the second one appear:

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

This works. My issue is then getting the secondForm to submit, but POST both the first and second's information, as if with the one submit button, I was submitting both. Is this possible? And if so, how?

To use a GET method I'd go:

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

But I don't want to do that, as GET = a bad idea for sensitive info.

Answer 1

I would use one form, but wrap the two sets of inputs in divs. Just hide the first div and show the second on the first button click (which you wouldn't keep as a submit button), then submit the entire form on the second button click.