我正在为我正在处理的投资组合开发联系表单,当我点击提交按钮发送邮件时,而不是在表单下方显示引导程序警报消息,页面重定向到PHP文件。
我在提交有效详细信息后会从表单收到收件箱中的电子邮件,但即使我使用了ajax,我仍然会被重定向。
http://nickcookweb.co.uk/#contact处的示例。
编辑:preventDefault();似乎根本没有工作。
HTML:
<form id="contactForm" name="contactForm" action="contact.php" method="POST">
<input type="text" name="name" id="name" placeholder="Full Name (Required)" required/>
<input type="email" name="email" id="email" placeholder="Email (Required)" required/>
<input type="tel" name="tel" id="tel" placeholder="Contact Number"/>
<textarea type="text" name="message" id="message" placeholder="Message (Required)" required></textarea>
<button type="submit" id="sendButton" class="button">Send<span class="fa fa-paper-plane" aria-hidden="true" style="margin-left:6px; top:2px"></span></button>
</form>
<div id="contactSuccess" class="alert alert-success">
<span>
<p>Message sent successfully.</p>
</span>
</div>
<div id="contactError" class="alert alert-danger">
<span>
<p>There was an error sending your message. Please try again.</p>
</span>
</div>
PHP:
<?php
$to = "contact@nickcookweb.co.uk";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$message = $_REQUEST['message'];
$headers = "From: $from";
$subject = "New Message via Portfolio";
$fields = array();
$fields{"name"} = "name";
$fields{"email"} = "email";
$fields{"tel"} = "tel";
$fields{"message"} = "message";
$body = "Details:";
foreach($fields as $a => $b) {
$body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]);
}
$send = mail($to, $subject, $body, $headers);
?>
JS:
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
tel: {
required: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: "Please provide your name",
minlength: "Your name must be at least 2 characters long"
},
email: {
required: "Please provide your email address"
},
message: {
required: "Please enter a message",
minlength: "Your message must be at least 10 character long"
},
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 0.15, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#contactSuccess').fadeIn();
});
},
error: function() {
$('#contactForm').fadeTo( "slow", 0.15, function() {
$('#contactError').fadeIn();
});
}
});
}
});
});
答案 0 :(得分:0)
$('#yourButton').on('click', function{
event.preventDefault();
//do your ajax and on success show msg
})
答案 1 :(得分:0)
我在本地测试了这个(没有实际的contact.php
),但它在本地工作。
$('#form').validate({
submitHandler: function(form) {
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function(response) {
console.log(response);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="contact.php" method="post" id="form">
<label for="name">Name:</label>
<input name="name" type="text" required="" />
<input type="submit" />
</form>
答案 2 :(得分:-1)
使用带type="button"
的按钮或添加对'preventDefault()'的调用,以避免提交表单。
答案 3 :(得分:-1)
只需将此属性添加到您的表单即可防止默认操作。
<form id="contactForm" name="contactForm" action="contact.php" method="POST" onsubmit="return false">