我已经找了好几天试图找到我的具体问题的答案,但我无法这样做。请帮忙。
我的网站上有一个表格,点击后应该会发送一封电子邮件。我想在保持同一页面并将 div 从表单更改为图像的同时执行此操作。
这是我设法从互联网上清除的代码。
请尽可能以最巴尼的风格给出建议。
提前感谢任何可能提供帮助的人。
jQuery(document).ready(function(){
jQuery('.contact').submit( function() {
$.ajax({
type: "POST",
url: "contact-form-handler.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
.append("<p>We will be in touch soon.</p>")
.hide();
});
}
});
return false;
});
<form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin">
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
<div class="w3-rest">
<input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message">
</div>
</div>
<p class="w3-center">
<input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />
</p>
</form>
`
<?php
$errors = '';
$myemail = 'jerry@sitesbyjc.com';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n Email: $email_address \n Message: \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
}
?>
最佳答案
<form>
将其作为默认行为,将用户重定向到提交时的 URL。网址取自action
属性。
为了防止这种重定向,您必须告诉浏览器:“不要重定向”。
短: e.preventDefault()
长:在提交回调中,您的函数接受一个参数。只需将其命名为:e
.这是一个对象,它有一个函数 preventDefault
.此功能可防止默认行为:重定向。在回调函数的第一行执行此调用。
关于javascript - 提交表单后如何留在页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44488017/