I am still learning PHP, so bear with me. I am trying to create a sign up form that includes 2 DIVs. Once you click submit on the first div (personal info), it slides away and the second div (billing info) slides up using jQuery.
My problem is… I need some help figuring out how to determine if the submit function came from the first div or the second. If it’s the first div, the slide happens. If it’s the second div, the form is submitted.
HTML with Form
<div id="container">
<!-- #first_step -->
<div id="first_step">
<h1>SIGN UP FOR 17 FIT CLUB</h1>
<form class="signup" action="post/signup" method="post">
<input type="hidden" name="step" value="user" />
<div class="form">
<input type="text" name="email" id="email_signup" value="" />
<label for="email">Your email address. We send important administration notices to this address. </label>
<input type="text" name="confirmemail" id="cemail_signup" value="" />
<label for="username">Please re-type your email to verify it is correct.</label>
<input type="text" name="firstname" id="firstname_signup" value="" />
<label for="firstname">Your First Name. </label>
<input type="text" name="lastname" id="lastname_signup" value="" />
<label for="lastname">Your Last Name. </label>
<input type="text" name="username" id="username_signup" value="" />
<label for="username">At least 6 characters. Uppercase letters, lowercase letters and numbers only.</label>
<input type="password" name="password" id="password_signup" value="" />
<label for="password">At least 6 characters. Use a mix of upper and lowercase for a strong password.</label>
<input type="password" name="cpassword" id="cpassword_signup" value="" />
<label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_first" id="submit_first" value="submit"/>
</form>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #second_step -->
<div id="second_step">
<h1>SIGN UP FOR 17 FIT CLUB</h1>
<form class="signup" action="post/signup" method="post">
<input type="hidden" name="step" value="user" />
<div class="form">
<input type="text" name="nameoncard" id="nameoncard_signup" value="" />
<label for="email">Enter the name on the credit or debit card used for billing. </label>
<select name="cardtype" id="cardtype_signup" >
<option name="visa">Visa</option>
<option name="mastercard">Mastercard</option>
<option name="amex">American Express</option>
<option name="discover">Discover</option>
</select>
<label for="cardtype">What type of card are you using?</label>
<input type="text" name="cardnumber" id="cardnumber_signup" value="" />
<label for="cardnumber">Enter the card number.</label>
<div id="exp_date_signup">
<select name="exp_month" id="exp_month_signup" >
<option name="01">01</option>
<option name="02">02</option>
<option name="03">03</option>
<option name="04">04</option>
</select>
<select name="exp_year" id="exp_year_signup" >
<option name="12">12</option>
<option name="13">13</option>
<option name="14">14</option>
<option name="15">15</option>
</select>
</div>
<label for="exp_year">Enter the expiration date on the card.</label>
<input type="text" name="CVV2" id="cvv2_signup" value="" />
<label for="CVV2">Enter the 3 or 4 digit CVV2 number.</label>
<select name="country" id="country_signup">
<option value=" " selected>(please select a country)</option>
<option value="AF">Afghanistan</option>
<option value="ZM">...More options...</option>
<option value="ZW">Zimbabwe</option>
</select>
<label for="country">Enter the country for your billing address.</label>
<input type="text" name="billingaddress" id="billingaddress_signup" value="" />
<label for="bilingaddress">Enter the street name and number for the credit or debit card billing address.</label>
<input type="text" name="billingcity" id="billingcity_signup" value="" />
<label for="billingcity">Enter the city for you billing address.</label>
<select name="billingstate" id="billingstate_signup">
<option value="AL">Alabama</option>
<option value="AK">...More options...</option>
<option value="WY">Wyoming</option>
</select>
<label for="billingstate">Choose the state for your billing address.</label>
<input type="text" name="billingpostalcode" id="billingpostalcode_signup" value="" />
<label for="cpassword">Enter the postal code for your billing address.</label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="send submit" type="submit" name="submit_second" id="submit_second" value="submit" />
</form>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
</div>
Javascript (I put “???” in the area I assume I need help)
<script type="text/javascript">
$(function(){
$('form.signup').submit(function(event){
event.preventDefault();
uri = $(this).attr('action');
data = $(this).queryString();
$.get(uri, data, function(response){
if(response.status == 0){
alert(response.message);
}
else if(???){
//show next step
$('#first_step').slideUp();
$('#second_step').slideDown();
}
else {
// redirect to internal home page
window.location = '<?=PROTOCOL?>//<?=DOMAIN?>/home';
}
}, 'json');
});
$('form.signup input').focus(function(event){
if(!$(this).hasClass('clicked')){
$(this)
.val('')
.addClass('clicked');
}
});
});
</script>
Any help would be greatly appreciated! I am sure this has a simple solution, but I haven’t been able to crack it. n00b!
UPDATE:
ANSWER LISTED BELOW
Here is the answer to my question. I figured it out with the assistance of a person in RL. Both submit inputs have their own value, “user” and “billing” respectively.