我有一个100%工作的php / ajax表单...但我需要在 SAME 页面上使用相同的表格。当然,每个表格都会发送给不同的收件人。
我尝试复制表单,看起来很复杂!我已经尝试过提交重复的表单(对重复的表单进行大量编辑以尝试使其正常工作)但没有成功 我不知道我在做什么是对的。 表格如何,点击时我有一个按钮,它切换包含表格的div ...填写表格,点击提交,弹出一条ajax成功消息说谢谢
HTML表格:
<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>
如果我制作了重复的表单,我需要在HTML代码中更改的内容如下:
action="contact.php" name="contactform"
id="contactform"
为:
action="contact2.php" name="contactform2"
id="contactform2"
这是对的吗?我需要在HTML中更改其他任何内容吗?
转到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();
}
);
});
我是否需要使字段ID在同一页面上复制不同的表单? EG:
$.post(action, {
name2: $('#name2').val(),
email2: $('#email2').val(),
phone2: $('#phone2').val(),
dayin2: $('#dayin2').val(),
dayout2: $('#dayout2').val(),
comments2: $('#comments2').val(),
verify2: $('#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;
// 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.
}
}
提前致谢!真的很感谢你的帮助,因为我已经尝试了几个小时,但我还没有做好!
修改 我当前的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;
});
});
答案 0 :(得分:2)
不使用jquery选择器的ID,而是使用类。您可以为所有表单提供相同的类名,并且相同的字段也可以获得相同的类。
然后,在你的jquery中使用那些:
$('.contactform').submit(function(){
$.post(action, {
name: $(this).children('.name').val(),
它应该适用于您拥有的表单的许多实例,因为所有输入字段都由$(this)引用,这是提交的表单,无论id或名称如何。
编辑:
这对你有用。对于任何数量的表格,这就是你所需要的。
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;
});
});