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