我还在学习PHP，所以请耐心等待。 我正在尝试创建一个包含 2 个 DIV 的注册表单。 单击第一个div（个人信息）上的提交后，它会滑开，第二个div（帐单信息）使用jQuery向上滑动。
我的问题是...我需要一些帮助来确定如何确定提交函数是来自第一个div 还是第二个。 如果是第一个div，则滑动。 如果是第二个div，则提交表单。
带有表单的网页
<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（我在我认为需要帮助的区域输入"???"）
<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>
任何帮助将不胜感激！ 我相信这有一个简单的解决方案，但我无法破解它。n00b！
更新：
答案如下
我建议将两个表单合并为一个表单;用带有两个单独按钮的div 标签拆分两个"表单"，然后像这样使用 jquery
//First Button Click Handler
$.("form div#first input.submit").click(function(){
$("div.first").slideUp('fast',function(){
$("div.second").slideDown('fast');
});
});
//Second Button Click Handler
$.("form div#second input.submit").click(function(){
var data = $('form').serialize();
var url = "whatever";
$.get(url,data,function(response){
//Handle Response
});
});
诀窍是禁用表单的正常提交触发器，然后使用特定的点击处理程序直接处理它们
默认情况下，html中的类似内容将阻止您的表单提交
<form onsubmit="return false;">
<input type="password"/>
<input type="submit"/>
</form>
有一个调用 jQuery 函数的下一步按钮和计费信息底部的提交按钮。前任：
function(slide){
$('#first_step').slideUp();
$('#second_step').slideDown();
}
这是我问题的答案。 我在RL的一个人的帮助下想通了。 两个提交输入都有自己的值，分别是"用户"和"计费"。
<script type="text/javascript">
$(function(){
$('form.signup').submit(function(event){
event.preventDefault();
uri = $(this).attr('action');
data = $(this).queryString();
step = $(this).find('input[name=step]').val(); // <--update
if(response.status == 0){
alert(response.message);
}
else{ // <--update
if(step == 'user'){ // <--update
//show next slide // <--update
$('#first_step').slideUp(); // <--update
$('#second_step').slideDown(); // <--update
} // <--update
else if(step == 'billing'){ // <--update
//redirect to internal home page // <--update
window.location = '<?=PROTOCOL?>//<?=DOMAIN?>/home'; // <--update
} // <--update
}
}, 'json');
});
$('form.signup input').focus(function(event){
if(!$(this).hasClass('clicked')){
$(this)
.val('')
.addClass('clicked');
}
});
});
</script>