Form Posting data

Question

I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:

<div id="Registration" style="display:none;">
        <div class="box">
            <form id="frmtype1" action="#" name="frmtype1" method="post">
                <header>Registration Options</header><br/>
                 <label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>

                 <label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>

                 <label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
                 <p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
            </form>

            <form name="everything" id="everything" action="#" method="post">
                <header>Registration Information</header><br/>
                <label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
                Last Name*: <input type="text" name="lname" id="lname" /> <br/>
                Address*: <input type="text" name="address" id="address" /> <br/>
        </form>
        </div>
    </div>

So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks

Answer 1

Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.

1. Wrap all the input elements in one html form tag
2. For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
3. Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
4. On your last "page" have a normal submit button and then all the form data is posted in one.

For example, the html might look like this:

<script type="text/javascript">
  $(document).ready(function{

    $(".next-page").click(function(){
      $(".box-wrapper").hide();
      $("#page-" + $(this).data("page")).show();
    });

  });
</script>

<div class="registration">
  <form name="regform" action="" method="post">
    <!-- Page 1 -->
    <div class="box-wrapper" id="page-1">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
      </div>
    </div>
    <!-- Page 2 -->
    <div class="box-wrapper" id="page-2" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
      </div>
    </div>
    <!-- Page 3 -->
    <div class="box-wrapper" id="page-3" style="display: none;">  
      <div class="box">
        <!-- form inputs go here -->
        <input type="submit" name="submit" class="submit" value="Complete Registration"/>
      </div>
    </div>
  </form>
</div>

Answer 2

Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.