Multiple input elements for PHP post form

Question

I've got 3 different stages to my application form and have 2 buttons using the <input type="button"> but when submitting the form, using the last button, it'll only save the third part of the application, how do I get the previous 2 parts form elements?!

<form action="" method="post">
<section class="mainSection">
    <section class="firstStep">
        <header class="firstStepheader">
            Step 1: Your Details
        </header>

        <section class="firstStepDetails">
            <div class="left">
                <h1>First Name:</h1>
                <input name="firstName" id="firstName" tabindex="1">
                <h2 id="fNameError">Please enter your first name</h2>
                <h1>Email Address:</h1>
                <input name="emailAddress" id="emailAddress" tabindex="3">
                <h2 id="emailError">Please enter your email address</h2>
            </div>
            <div class="right">
                <h1>Surname:</h1>
                <input name="surName" id="surName" text=""  tabindex="2">
                <h2 id="sNameError">Please enter your surname</h2>
            </div>
            <input class="nextButton" id="firstNextButton" value="Next >" type="button">
        </section>
    </section>

    <br>

    <section class="secondStep">
        <header class="secondStepheader">
            Step 2: More Details
        </header>

        <section class="secondStepDetails">
            <div class="left">
                <h1>Telephone Number</h1>
                <input name="telNo" text="" id="telNo"  tabindex="1">
                <h2 id="telNoError">Please enter your telephone number</h2>

                <h1>Gender</h1>
                <select id="gender" tabindex="3">
                    <option id="male">Male</option> 
                    <option id="female">Female</option>
                </select>
            </div>
            <div class="right">
                <h1>Date of Birth</h1>
                <input name="dOB" text="" id="dOB" tabindex="2"><h3>Format: DD/MM/YYYY</h3>
                <h2 id="dOBError">Please enter a valid date</h2>
            </div>
            <input class="nextButton" id="secondNextButton" value="Next >" type="button">
        </section>
    </section>

    <br>

    <section class="thirdStep">
        <header class="thirdStepheader">
            Step 3: Comments Section
        </header>

        <section class="thirdStepDetails">
            <div class="left">
                <h1>Comments</h1>
                <textarea name="telNo" text="" cols="50"></textarea>
            </div>
            <button class="nextButton" id="submitButton" type="submit">Submit ></button>
        </section>
    </section>
</section>
</form>

Answer 1

Found out that I disabled the inputs in my JQuery meaning the elements wouldn't be posted.

Answer 2

If you want multiple buttons, you'll need to use AJAX to process the form in multiple parts. Otherwise, just use one button at the end. The last button will send everything via $_POST and you can capture it and process it however you want.