将多个表单放在同一页面上 [英] Putting multiple forms on the same page
本文介绍了将多个表单放在同一页面上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个可以100％运行的php / ajax表单，但我需要在 SAME 页面上添加一些相同的表单。当然，每个表单都会发送给不同的收件人。
我尝试复制表单，看起来非常复杂！我已经尝试提交重复的表单（对重复表单进行大量编辑以尝试使其工作），但没有成功
我不知道我所做的是对的。
表单如何操作，点击时有一个按钮，它会切换包含表单的div ...填写表单，点击提交，然后弹出一个ajax成功消息，表示感谢您
HTML FORM：
< body>
< div id =container>
< div id =accommodation_listing_options_box>
< ul id =accommodation_listing_options>
< li>价格范围：< a href =＃class =tooltipstyle =cursor：help; title =中档
住宿>< img src =../ mid-range-yellow.pngwidth =28height =19
align =absmiddle风格=填充左：0像素; />< / A>< /锂>
< li>< a href =＃>查看
评论< / a> < img src =../ comments_bubble_small.pngwidth =18height =16
align =absmiddlestyle =padding-left：5px; />< /锂>
< / ul>
< / div>
< div id =quick_enquiry_box>制作快速查询< / div>
< div style =clear：both; width：710px;>< / div>
< div style =clear：both;>< / div>
< div id =slide_panel>
< div id =contact>
< div id =message>< / div>
< form method =postaction =contact.phpname =contactform
id =contactform>
< div id =my_contact_left>
< label for =nameaccesskey =U>< span class =required> *
< / span> ;名称< / label>< br />
< input name =nametype =textid =namesize =30/>
< br />
< label for =emailaccesskey =E>< span class =required> *
< / span>电子邮件< / label>< br />
< input name =emailtype =textid =emailsize =30/>
< br />
< label for =phoneaccesskey =P>< span class =required> *
< / span>电话：< / label>< >
< input name =phonetype =textid =phonesize =30/>
< br />
< label for =dayinaccesskey =P>第一天：< / label>< br />
< input name =dayinclass =datepickertype =textid =dayin
size =30/>
< br />
< label for =dayoutaccesskey =P> Day out：< / label>< br />
< input name =dayoutclass =datepicker2type =textid =dayout
size =30/>
< / div>
< div id =my_contact_right>
< label for =commentsaccesskey =C>< span class =required> *
< / span>您的评论< / label>< ; br />
< textarea name =commentscols =40rows =3id =comments
style =width：350px; height：100px;>< / textarea>
< p>< span class =required> *< / p>在
中键入验证码< / p>
< div style =width：100px; height：40px; float：left;>< label
for =verifyaccesskey =V>& & nbsp;& nbsp;< / label>< / div>< / label>< / div>图片
验证border =0/>
< div style =width：310px; height：40px; float：right;>< input
name =verifytype =textid =verifysize = 6value =style =width：50px; />
< input type =submitstyle =margin-left：112px; class =submit
id =submitvalue =发送它！ />< / DIV>
< div style =clear：both; width：410px;>< / div>
< / div>
< div style =clear：both; width：710px;>< / div>
< / form>
< / div>
< div id =quick_form_wrapper_close>< a href =＃>< img src =../ close-panel-button.gif
/>< / A>< / DIV>
< / div>
< / div>
< / body>
如果我制作复制表单，我需要在HTML代码中更改以下内容： / p>
action =contact.phpname =contactform
id =contactform
到：
动作=contact2.phpname =contactform2
id =contactform2
这正确吗？我还需要在HTML中进行更改吗？
移至Javascript：
jQuery（document）.ready（function（）{
$ b $（'＃contactform'）。submit（function（）{
var action = $（这个）.attr（'action'）;
$（'＃submit'）。attr（'disabled'，'disabled'）。after（'< img src =assets / ajax-
loader.gifclass =loader/>'）;
$（＃message）。slideUp（750，function（）{
$（'隐藏（）;
$ .post（动作，{
名称：$（'＃name'）。val（），
email：$（ '（'＃phone'）。val（），
phone（），$（'＃phone'）。val（），$ b $ dayin：$（'＃dayin'）。val（），
dayout：$（'＃dayout'）。val（），
评论：$（'＃comments'）。val（），
verify：$（'＃verify'）。val（）
}，
函数（data）{
document.getElementById（'message'）。innerHTML = data;
$（'＃message'）。slideDown（'sl （）';
$（'＃contactform img.loader'）。fadeOut（'fast'，function（）
{$（this）.remove（）}）;
$（'＃submit'）。removeAttr（'disabled'）;
if（data.match（'success'）！= null）;
$（＃message）。show（）。delay（5000）.fadeOut（）;
}
）;
}）;
我是否需要将字段ID的不同复制到同一个页面上？
EG：
$。post（action，{
name2：$（'＃name2'） .val（），
email2：$（'＃email2'）。val（），
phone2：$（'＃phone2'）。val（），$ b $ dayin2：$（' val（），
（），
dayout2：$（'＃dayout2'）。val（），
comment2：$（'＃comments2'）。val ：$（'＃verify2'）。val（）
}，
对PHP进程表单做任何修改？
这里是php进程表单的主要部分：
$ name = $ _POST ['name'];
$ email = $ _POST ['email'];
$ phone = $ _POST ['phone'];
$ dayin = $ _POST [ 'dayin'];
$ dayout = $ _POST ['dayout'];
$ comments = $ _POST ['comments'];
if（isset（$ _ POST [ 'verify']））：
$ posted_verify = $ _POST ['verify'];
$ posted_verify = md5（$ posted_verify）;
else：
$ posted_verify ='' ;
endif;
//重要Va ribles
$ session_verify = $ _SESSION ['verify'];
if（empty（$ session_verify））$ session_verify = $ _COOKIE ['verify'];
$ error ='';
if（trim（$ name）==''）{
$ error。='< li>您的名字是必填项。< / li>';
if（trim（$ email）==''）{
$ error。='< li>您的电子邮件地址是必需的。<立GT;';
} elseif（！isEmail（$ email））{
$ error。='< li>您输入的电子邮件地址无效。< / li>';
}
if（trim（$ phone）==''）{
$ error。='< li>您的电话号码为必填项。< / li> ;
} elseif（！is_numeric（$ phone））{
$ error。='< li>您的电话号码只能包含数字。< / li>';
}
if（trim（$ comments）==''）{
$ error。='< li>您必须输入要发送的邮件。<立GT;';
}
if（$ session_verify！= $ posted_verify）{
$ error。='< li>您输入的验证码不正确。
< / li>';
}
if（$ error！=''）{
echo'< div class =error_message>注意！请更正下面的
错误，然后重试。
echo'< ul class =error_messages>'。 $错误。 < / UL>;
echo'< / div>';
} else {
if（get_magic_quotes_gpc（））{$ comments = stripslashes（$ comments）; }
//高级配置选项。
//即标准主题将显示为您已与
John Doe联系。
$ e_subject ='您已与'联系'。 $名称。 。;
//高级配置选项。
//如果你觉得需要，你可以改变它。
//开发人员，您可能希望在表单中添加更多字段，在这种情况下，您必须确保将
添加到此处。
$ msg =您已经通过$姓名联系了住宿。
他们通过了验证，他们的信息如下。 。 PHP_EOL。 PHP_EOL;
$ msg。=$ comments。 PHP_EOL。 PHP_EOL;
$ msg。=您可以通过电子邮件，$电子邮件或电话$ phone联系$姓名。 。
PHP_EOL。 PHP_EOL;
$ msg。=我们希望从$ dayin停留到$ dayout。 PHP_EOL。
PHP_EOL;
$ msg。=
------------------------------------- --------------------------------------
- 。 PHP_EOL;
if（$ twitter_active == 1）{
$ twitter_msg = $ name。 - 。 $评论。 你可以联系。
$名称。 通过电子邮件， 。 $电子邮件。或通过电话。 $手机。 ;
twittermessage（$ twitter_user，$ twitter_msg，$ consumer_key，
$ consumer_secret，$ token，$ secret）;
}
$ msg = wordwrap（$ msg，70）;
$ headers =发件人：$ email。 PHP_EOL;
$ headers。=回复：$ email。 PHP_EOL;
$ headers。=MIME-Version：1.0。 PHP_EOL;
$ headers。=Content-type：text / plain; charset = utf-8。 PHP_EOL;
$ headers。=Content-Transfer-Encoding：quoted-printable。 PHP_EOL;
if（mail（$ address，$ e_subject，$ msg，$ headers））{
echo< fieldset>;
echo< div id ='success_page'>;
回显< strong>电子邮件已成功发送。< / strong>;
回显< / div>;
echo< / fieldset>;
} else {
echo'ERROR！'; //不要编辑。
}
}
预先感谢！真的很感谢你的帮助，因为我已经尝试了好几个小时，而且我还没弄清楚。
编辑：
MY CURRENT JAVASCRIPT CODING：
jQuery（document）.ready（function（）{
$（'。 contactform'）。submit（function（）{
var action = $（this）.attr（'action'）;
$ b $（'。submit'）。attr （''disabled'，'disabled'）。after（'< img src =assets / ajax-
loader.gifclass =loader/>'）;
$（＃message）。slideUp（750，function（）{
$（'＃message'）。hide（）;
$ .post（action，{$ b $ （姓名）。val（），
email：$（'。email'）。val（），
phone：$（'。phone'）。val（） ，
dayin：$（'。dayin'）。val（），
dayout：$（'。dayout'）。val（），
评论：$（'。comments'） .val（），
verify：$（'。verify'）。val（）
}，
function（data）{
document.getElementById（'m essage'）。innerHTML = data;
$（'＃message'）。slideDown（'slow'）;
$（'。contactform img.loader'）。fadeOut（'fast'，function（）
{$（this）.remove（）}）;
$（'。submit'）。removeAttr（'disabled'）;
if（data.match（'success'）！= null）;
$（＃message）。show（）。delay（5000）.fadeOut（）;
}
）;
}）;
返回false;
}）;
}）;
jQuery（document）.ready（function（）{
$ b $（'。contactform2'）。submit（function（）{
var （'' $ b $（'。submit'）。attr（'disabled'，'disabled'）。 assets / ajax-
loader.gifclass =loader/>'）;
$（＃message2）。slideUp（750，function（）{
$（'＃message2'）。hide（）;
$ .post（action，{
name：$（'。name'）。val（），
电子邮件：$（'。email'）。val（），
phone：$（'。phone'）。val（），$ b $ dayin：$（'。dayin'）。val（）， $（$。dayout'）。val（），
评论：$（'。comments'）。val（），
verify：$（'。verify'）。 val（）
}，
function（data）{
document.getElementById（'message2'）。innerHTML = data;
$（'＃message2'）。slideDown（'慢'）;
$（'。contactform2 img.loader'）。fadeOut（'fast'，function（）
{$（this ）.remove（）}）;
$（'。submit'）。removeAttr（'disabled'）;
if（data.match（'success'）！= null）;
$（＃message2）。show（）。delay（5000）.fadeOut（）;
}
）;
}）;
返回false;
}）;
}）;
我目前的JAVASCRIPT CODE：
<$ p $ （函数（））{
$（'。contactform'）。submit（函数（）{
$ action'='（this）.attr（'action'）;
$（this）.children（'。submit'）。attr（'disabled'，'disabled'）。after（'< ; img
src =assets / ajax-loader.gifclass =loader/>'）;
$ b $（this）.children（＃message）。slideUp （750，function（）{
$（this）.children（'＃message'）。hide（）;
$ .post（action，{
name：$ （this）.children（'。name'）。val（），
email：$（this）.children（'。email'）。val（），
phone：$（this）。 （'。phone'）。val（），$ b $ dayin：$（this）.children（'。dayin'）。val（），$ b $ dayout：$（this）.children（'。 （）。$（this）.children（'。comments'）。val（），
verify：$（this）.children（'。verify'）。 val（）
}，
函数（dat a）{
document.getElementById（'message'）。innerHTML = data;
$（this）.children（'＃message'）。slideDown（'slow'）;
$（this）.children（'。contactform
img.loader'）。fadeOut（'fast'，function（）{$（this）.remove（）}）;
$（this）.children（'。submit'）。removeAttr（'disabled'）;
if（data.match（'success'）！= null）;
$（this）.children（＃message）。show（）。delay（5000）.fadeOut（）;
}
）;
}）;
返回false;
}）;
}）;
解决方案
不是使用jquery选择器的ID，而是使用类。你可以给所有的表单使用相同的类名，并且相同的字段也可以使用相同的类。
然后，在你的jQuery中使用这些：
$（' .contactform'）。submit（function（）{
$ .post（action，{
name：$（this）.children（'。name'）。val（），
它应该适用于表单的多个实例，因为所有输入字段都由$（this）引用，这是提交的表单，不管是id还是名称。
编辑：
这应该适合你。
jQuery（document）.ready（function（）{
$ b $（'。contactform'）。submit（function（）{
var action = $（this）.attr（'action'）;
'（'。submit'，this）.attr（'disabled'，'disabled'）。after（'< img src =assets / ajax-loader.gifclass =loader/>'）;
$ b $（'。message'，this）.slideUp（750，function（）{
$（'。message'，this）.hide（）;
$ .post（行动，{
名称：$（'。name'，this）.val（），
email：$（'。email'，this）.val（），
phone：$ （'.phone'，this）.val（），
dayin：$（'。dayin'，this）.val（），$ b $ dayout：$（'。dayout'，this）.val （），
评论：$（'。comments'，this）.val（），
verify：$（'。verify'，this）.val（）
}，
函数（数据）{
$（'。message'，this）.html（data）;
$（'。message'，this）.slideDown（'slow'）;
$（'img.loader'，this）.fadeOut（'fast'，function（）{
$（this）.remove（）;
}）;
$（'。submit'，this）.removeAttr（'disabled'）;
if（data.match（'success'）！= null）;
$（'。message'，this）.show（）。delay（5000）.fadeOut（）;
}）;
}）;
返回false;
}）;
}）;
I've got a php / ajax form that works 100% ... but I need a few of the same form on the SAME page. Of course each of the forms will go to a different recipient.
I tried duplicating the form and it seems very complicated! I've tried submitting the duplicated form (with lots of edits to the duplicated form to try get it working) but no success I don't know if what I am doing is right. How the form goes is, I have a button when clicked, it toggleslides the div which contains the form... fill in the form, hit submit and an ajax success message pops up saying thank you
HTML FORM:
<body>
<div id="container">
<div id="accommodation_listing_options_box">
<ul id="accommodation_listing_options">
<li>Price Range: <a href="#" class="tooltip" style="cursor:help;" title="Mid-range
Accommodation"><img src="../mid-range-yellow.png" width="28" height="19"
align="absmiddle" style="padding-left:0px;" /></a></li>
<li><a href="#">View
Comments</a> <img src="../comments_bubble_small.png" width="18" height="16"
align="absmiddle" style="padding-left:5px;" /></li>
</ul>
</div>
<div id="quick_enquiry_box">Make Quick Enquiry</div>
<div style="clear:both; width:710px;"></div>
<div style="clear:both;"></div>
<div id="slide_panel">
<div id="contact">
<div id="message"></div>
<form method="post" action="contact.php" name="contactform"
id="contactform">
<div id="my_contact_left">
<label for="name" accesskey="U"><span class="required">*
</span>Name</label><br />
<input name="name" type="text" id="name" size="30" />
<br />
<label for="email" accesskey="E"><span class="required">*
</span>Email</label><br />
<input name="email" type="text" id="email" size="30" />
<br />
<label for="phone" accesskey="P"><span class="required">*
</span>Phone:</label><br />
<input name="phone" type="text" id="phone" size="30" />
<br />
<label for="dayin" accesskey="P">Day in:</label><br />
<input name="dayin" class="datepicker" type="text" id="dayin"
size="30" />
<br />
<label for="dayout" accesskey="P">Day out:</label><br />
<input name="dayout" class="datepicker2" type="text" id="dayout"
size="30" />
</div>
<div id="my_contact_right">
<label for="comments" accesskey="C"><span class="required">*
</span>Your Comments</label><br />
<textarea name="comments" cols="40" rows="3" id="comments"
style="width: 350px; height:100px;"></textarea>
<p><span class="required">*</span>Type the validation code in
below</p>
<div style="width:100px; height:40px; float:left;"><label
for="verify" accesskey="V"> <img src="image.php" alt="Image
verification" border="0"/></label></div>
<div style="width:310px; height:40px; float:right;"><input
name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" />
<input type="submit" style="margin-left:112px;" class="submit"
id="submit" value="Send it!" /></div>
<div style="clear:both; width:410px;"></div>
</div>
<div style="clear:both; width:710px;"></div>
</form>
</div>
<div id="quick_form_wrapper_close"><a href="#"><img src="../close-panel-button.gif"
/></a></div>
</div>
</div>
</body>
If I make a duplicated form, what I need to change in the HTML code is the following:
action="contact.php" name="contactform"
id="contactform"
to:
action="contact2.php" name="contactform2"
id="contactform2"
Is this correct? Anything else I need to change in the HTML?
Moving onto the Javascript:
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$('#submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');
$("#message").slideUp(750,function() {
$('#message').hide();
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
dayin: $('#dayin').val(),
dayout: $('#dayout').val(),
comments: $('#comments').val(),
verify: $('#verify').val()
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
$('#submit').removeAttr('disabled');
if(data.match('success') != null);
$("#message").show().delay(5000).fadeOut();
}
);
});
Do I need to make the field ID's different duplicating a form on the same page? EG:
$.post(action, {
name2: $('#name2').val(),
email2: $('#email2').val(),
phone2: $('#phone2').val(),
dayin2: $('#dayin2').val(),
dayout2: $('#dayout2').val(),
comments2: $('#comments2').val(),
verify2: $('#verify2').val()
},
Do I need to do any changes to the PHP process form? Here is the main part of the php process form:
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$dayin = $_POST['dayin'];
$dayout = $_POST['dayout'];
$comments = $_POST['comments'];
if (isset($_POST['verify'])) :
$posted_verify = $_POST['verify'];
$posted_verify = md5($posted_verify);
else :
$posted_verify = '';
endif;
// Important Variables
$session_verify = $_SESSION['verify'];
if (empty($session_verify)) $session_verify = $_COOKIE['verify'];
$error = '';
if(trim($name) == '') {
$error .= '<li>Your name is required.</li>';
}
if(trim($email) == '') {
$error .= '<li>Your e-mail address is required.</li>';
} elseif(!isEmail($email)) {
$error .= '<li>You have entered an invalid e-mail address.</li>';
}
if(trim($phone) == '') {
$error .= '<li>Your phone number is required.</li>';
} elseif(!is_numeric($phone)) {
$error .= '<li>Your phone number can only contain digits.</li>';
}
if(trim($comments) == '') {
$error .= '<li>You must enter a message to send.</li>';
}
if($session_verify != $posted_verify) {
$error .= '<li>The verification code you entered is incorrect.
</li>';
}
if($error != '') {
echo '<div class="error_message">Attention! Please correct the
errors below and try again.';
echo '<ul class="error_messages">' . $error . '</ul>';
echo '</div>';
} else {
if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }
// Advanced Configuration Option.
// i.e. The standard subject will appear as, "You've been contacted by
John Doe."
$e_subject = 'You\'ve been contacted by ' . $name . '.';
// Advanced Configuration Option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case
you must be sure to add them here.
$msg = "You have been contacted by $name with regards to Accommodation.
They passed verification and their message is as follows." . PHP_EOL . PHP_EOL;
$msg .= "$comments" . PHP_EOL . PHP_EOL;
$msg .= "You can contact $name via email, $email or via phone $phone." .
PHP_EOL . PHP_EOL;
$msg .= "We want to stay from the $dayin to the $dayout" . PHP_EOL .
PHP_EOL;
$msg .=
"---------------------------------------------------------------------------
-" . PHP_EOL;
if($twitter_active == 1) {
$twitter_msg = $name . " - " . $comments . ". You can contact " .
$name . " via email, " . $email ." or via phone " . $phone . ".";
twittermessage($twitter_user, $twitter_msg, $consumer_key,
$consumer_secret, $token, $secret);
}
$msg = wordwrap( $msg, 70 );
$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;
if(mail($address, $e_subject, $msg, $headers)) {
echo "<fieldset>";
echo "<div id='success_page'>";
echo "<strong>Email Sent Successfully.</strong>";
echo "</div>";
echo "</fieldset>";
} else {
echo 'ERROR!'; // Dont Edit.
}
}
Thanks in advance! Really appreciate your help because I have tried for hours and I haven't got it right yet!
EDIT: MY CURRENT JAVASCRIPT CODING:
jQuery(document).ready(function(){
$('.contactform').submit(function(){
var action = $(this).attr('action');
$('.submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');
$("#message").slideUp(750,function() {
$('#message').hide();
$.post(action, {
name: $('.name').val(),
email: $('.email').val(),
phone: $('.phone').val(),
dayin: $('.dayin').val(),
dayout: $('.dayout').val(),
comments: $('.comments').val(),
verify: $('.verify').val()
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('.contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
$('.submit').removeAttr('disabled');
if(data.match('success') != null);
$("#message").show().delay(5000).fadeOut();
}
);
});
return false;
});
});
jQuery(document).ready(function(){
$('.contactform2').submit(function(){
var action = $(this).attr('action');
$('.submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');
$("#message2").slideUp(750,function() {
$('#message2').hide();
$.post(action, {
name: $('.name').val(),
email: $('.email').val(),
phone: $('.phone').val(),
dayin: $('.dayin').val(),
dayout: $('.dayout').val(),
comments: $('.comments').val(),
verify: $('.verify').val()
},
function(data){
document.getElementById('message2').innerHTML = data;
$('#message2').slideDown('slow');
$('.contactform2 img.loader').fadeOut('fast',function()
{$(this).remove()});
$('.submit').removeAttr('disabled');
if(data.match('success') != null);
$("#message2").show().delay(5000).fadeOut();
}
);
});
return false;
});
});
MY CURRENT JAVASCRIPT CODE:
jQuery(document).ready(function(){
$('.contactform').submit(function(){
var action = $(this).attr('action');
$(this).children('.submit').attr('disabled','disabled').after('<img
src="assets/ajax-loader.gif" class="loader" />');
$(this).children("#message").slideUp(750,function() {
$(this).children('#message').hide();
$.post(action, {
name: $(this).children('.name').val(),
email: $(this).children('.email').val(),
phone: $(this).children('.phone').val(),
dayin: $(this).children('.dayin').val(),
dayout: $(this).children('.dayout').val(),
comments: $(this).children('.comments').val(),
verify: $(this).children('.verify').val()
},
function(data){
document.getElementById('message').innerHTML = data;
$(this).children('#message').slideDown('slow');
$(this).children('.contactform
img.loader').fadeOut('fast',function(){$(this).remove()});
$(this).children('.submit').removeAttr('disabled');
if(data.match('success') != null);
$(this).children("#message").show().delay(5000).fadeOut();
}
);
});
return false;
});
});
解决方案
Instead of using IDs for the jquery selectors, use classes. You can give all of the forms the same class name and the fields that are the same get the same classes as well.
Then, use those in your jquery:
$('.contactform').submit(function(){
$.post(action, {
name: $(this).children('.name').val(),
It should work for however many instances of the form you have because all of the input fields are referenced by $(this), which is the submitted form, regardless of id or name.
EDIT:
This should work for you. For any number of forms, this is all you would need.
jQuery(document).ready(function(){
$('.contactform').submit(function(){
var action = $(this).attr('action');
$('.submit', this).attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
$('.message', this).slideUp(750,function() {
$('.message', this).hide();
$.post(action, {
name: $('.name', this).val(),
email: $('.email', this).val(),
phone: $('.phone', this).val(),
dayin: $('.dayin', this).val(),
dayout: $('.dayout', this).val(),
comments: $('.comments', this).val(),
verify: $('.verify', this).val()
},
function(data){
$('.message', this).html(data);
$('.message', this).slideDown('slow');
$('img.loader', this).fadeOut('fast',function() {
$(this).remove();
});
$('.submit', this).removeAttr('disabled');
if(data.match('success') != null);
$('.message', this).show().delay(5000).fadeOut();
});
});
return false;
});
});
这篇关于将多个表单放在同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
