我在使用jQuery的联系表单时遇到一些问题。
我之前多次使用相同的代码，但是这次我更改了div和class具有有意义的名称。
一切正常，只是当您按下Submit时，您实际上被带到send.php，而不是将数据放置在占位符div中。
它让我发疯，所以我想知道是否还有另外几双眼睛可以发现某些东西？
谢谢，
马丁
所有JS都包含在页面的顶部：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.highlight').hover(function(){
$(this).children().addClass('datahighlight');
},function(){
$(this).children().removeClass('datahighlight');
});
});
</script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('contactform').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('form_results').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>
联系方式：
<h2 class="contact">Contact Us</h2>
<p> Some text</p>
<div id="log">
<div id="form_results">
<!-- SPANNER -->
</div>
</div>
<form method="post" id="contactform" action="send.php">
<p><label for="name">Name</label></p>
<input type="text" id=name name=name placeholder="First and last name" tabindex="1" />
<p><label for="email">Email</label></p>
<input type="text" id=email name=email placeholder="[email protected]" tabindex="2" />
<p><label for="comment">Your Message</label></p>
<textarea name="comment" id=comment name=comment placeholder="Comments" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" />
</form>
</section>
Send.php：
<?php
function alpha_numeric($str)
{
return ( ! preg_match("/^([-a-z0-9])+$/i", $str)) ? FALSE : TRUE;
}
function valid_email($str)
{
return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
}
if ($_POST['name']=='' || strlen($_POST['name'])<3)
{
$errors[] = 'Please include your name, it helps when contacting you! [needs to be more than 3 characters]';
}
if (valid_email($_POST['email'])==FALSE)
{
$errors[] = 'At least put a real e-mail address!';
}
if ($_POST['comment']=='' || strlen($_POST['comment'])<3)
{
$errors[] = 'Please write something, otherwise it\'s pointless contacting us!';
}
if(is_array($errors))
{
echo '<div id="error-margin">';
echo '<p class="error"><b>Can\'t send it for the following reasons:</b></p><br />';
while (list($key,$value) = each($errors))
{
echo '<span class="error">'.$value.'</span><br /><br />';
}
echo'</div>';
}
else {
// do something here----store to db, send email
echo'<div id="success">';
echo '<p><b>It worked!</b></p>';
echo '<span>Thanks for contacting us! We\'ll be in touch soon</span>';
echo'</div>';
$name = stripslashes($_POST['name']); //sender's name
$email = stripslashes($_POST['email']); //sender's email
// The subject
$subject = "Message from 4playtheband.co.uk "; //The default subject. Will appear by default in all messages.
$msg = "From : $name \r\n"; // add sender's name to the message
$msg .= "e-mail : $email \r\n\n"; // add sender's email to the message
$msg .= "---Message--- \r\n\n\t".stripslashes($_POST['comment'])."\r\n\n"; // the message itself
// Extras:
// Display user information such as Ip address and browsers information...
$msg .= "---User information--- \r\n\n"; //Title
$msg .= "User IP Address: ".$_SERVER["REMOTE_ADDR"]."\r\n"; //Sender's IP
$msg .= "Browser: ".$_SERVER["HTTP_USER_AGENT"]."\r\n"; //User agent
$msg .= "Page User Came From: ".$_SERVER["HTTP_REFERER"]; //Referrer
// Send!
(mail('someone', $subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n"));
}
？>
您正在使用jquery，因此无需使用window.addEvent('domready', function(){
您的js代码应如下所示：
$('#contactform').submit(function() {
var query = $(this).serialize();
$('#form_results').fadeOut(500).addClass('ajax-loading');
$.ajax({
type: "POST",
url: "send.php",
data: query,
success: function(data) {
$('#form_results').removeClass('ajax-loading').html(data).fadeIn(500);
}
});
return false;
});
window.addEvent('domready',...来自MooTool。由于您使用的是Jquery，因此您可能必须添加
<script language="javascript" type="text/javascript">
jQuery.noConflict();
</script>
之前。哦，看来FancyUpload仅适用于MooTool，请不要忘记添加它。
我通常像这样使用preventDefault（）
<script type="text/javascript">
window.addEvent('domready', function(){
$('contactform').addEvent('submit', function(e) {
e.preventDefault();
var log = $('form_results').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>