event.preventDefault();提交表单时不起作用 [英] event.preventDefault(); not working when submiting form
问题描述
您好,我正在尝试将submited表单的结果放入div中,而不是在新窗口中打开它。问题是,我的event.preventDefault();似乎没有工作,我不明白为什么。结果总是在我点击提交按钮打开 contact-form-handler.php
这是脚本文件之后的结果
Hello I am trying to put the result from submited form in to a div instead of opening it inside new window. The problem is that my event.preventDefault(); seems not to be working and I don't see why. The result is always after I hit the submit button to open the contact-form-handler.php
which is the script file
以下是代码:
here is the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
联系表格:
<form class="form-container" id="contactForm" method="post" action="contact-form-handler.php">
<div class="form-title">Full Name:</div>
<input class="form-field" type="text" name="name" /><br />
<div class="form-title">Email Address:</div>
<input class="form-field" type="text" name="email" /><br />
<div class="form-title">Phone Number:</div>
<input class="form-field" type="text" name="phone" /><br />
<div class="form-title">Message:</div>
<textarea class="form-field" rows="8" cols="34" name="message"></textarea><br />
<div id="contactResponse"></div>
<div class="submit-container">
<button type="submit" class="submit-button">Send</button>
</div>
</form>
脚本代码:
<script type="text/javascript">
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
phone_value = $form.find( 'input[name="phone"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val();
/* Send the data using post */
var posting = $.post( "contact-form-handler.php", {
name: name_value,
email: email_value,
phone: phone_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( "#contactResponse" ).html(data);
/* Change the button text. */
$submit.text('Sent, Thank you');
/* Disable the button. */
$submit.attr("disabled", true);
});
});
</script>
PHP代码:
PHP CODE:
<?php
$myemail = 'mymail@mail.com';//<-----Put Your email address here.
$name = $_POST['name'];
$phone = $_POST['phone'];
$email_address = $_POST['email'];
$message = $_POST['message'];
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "Contact Form Emocool Website ".
" Here are the details:\n Name: $name \n Telefono: $phone \n Email: $email_address \n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
if(mail($to,$email_subject,$email_body,$headers))
{
echo "Thank you for contacting us";
}
//redirect to the 'thank you' page
else
{
echo "Sorry, there has been an error";
}
?>
所以问题是当我按下提交按钮而不是在#contactResponse div内显示结果时显示在脚本的新页面内contact-form-handler.php
So the problem is when I hit the submit button istead of the result showing inside the #contactResponse div it is showing inside new page of the script contact-form-handler.php
有什么建议为什么这不起作用?
any suggestions why this is not working ?
推荐答案
我最好的猜测是您要添加 #contactForm
submit在表单实际呈现之前的侦听器。尝试在 $(document).ready(function(){});
My best guess is that you are adding your #contactForm
submit listener before the form is actually rendered. Try wrapping your jQuery in $(document).ready(function () {});
中包装jQuery,没有看到任何其他问题。
I don't see any other issues.
这篇关于event.preventDefault();提交表单时不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!