我正在使用以下代码发送电子邮件。如果我删除e.preventDefault();它不起作用。为什么我需要禁用表单的默认提交行为?如果没有e.preventDefault();我怎么能实现呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divLoading').hide();
$('#appointment').submit(function (e) {
e.preventDefault();
var serviceURL = 'WebService.asmx/SendMail';
var Name = $("#fname").val();
var Email = $("#email").val();
var Telephone = $("#phone").val();
var Comment = $("#comment").val();
if ($("#fname").val().length == 0) {
alert("Please Enter Name");
$("#fname").focus();
return false;
}
if ($("#email").val().length == 0) {
alert("Please Enter Your Email Address.");
$("#email").focus();
return false;
}
if (Email.indexOf("@") == -1) {
alert("Please Enter Your Email Address.");
$("#email").focus();
return false;
}
if (Email.indexOf(".") == -1) {
alert("Please Enter Your Email Address.");
$("#email").focus();
return false;
}
$('#divLoading').show();
$.ajax({
type: "POST",
url: serviceURL,
data: '{"name":"' + Name + '","address":"' + Email + '","telephone":"' + Telephone + '","comment":"' + Comment + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
// alert("Mail Sent!");
$('#divLoading').hide();
window.location = "contat-submit.php";
}
function errorFunc() {
// alert('error');
}
});
});
</script>
</head>
<body>
<form name="appointment" id="appointment" method="post" action="About.aspx">
<div>
</div><div id="leftcolumn4"><div class="h2">Contact Form</div>
<form name="appointment" id="Form1" method="post" action="send_contact.php">
Full Name:
<br />
<label>
<input name="fname" type="text" class="form-input" id="fname" size="30" />
</label>
<br /><br />
Email Address:<br />
<label>
<input name="email" type="text" class="form-input" id="email" size="30" />
</label><br /><br />
Telephone:
<br />
<label>
<input name="phone" type="text" class="form-input" id="phone" size="30" />
</label>
<br /><br />
Your Comment:<br />
<label>
<textarea name="comment" cols="28" rows="4" class="form-input-box" id="comment"></textarea><br />
<br />
</label><input name="submit" type="submit" class="form-input-submit" value="Submit" id="btnMail"/>
</div>
</form>
</body>
</html>
答案 0 :(得分:2)
event.preventDefault()
方法会停止发生element
的默认操作。
而不是你可以使用return false。
例如,单击的锚点不会将浏览器带到新的URL。我们可以使用event.isDefaultPrevented()来确定此事件是否已被event handler调用此事件。
答案 1 :(得分:2)
此代码依赖于禁用表单的默认提交行为,因为表单数据是使用ajax发送的(而不是GET或POST请求,这也会使浏览器导航到About.aspx
)。 / p>
通过返回e.preventDefault();
,您可以在没有false
的情况下实现此目标
或者不使用ajax,在这种情况下,您将使用以下命令获取服务器端的POST数据:Page.Request.QueryString["htmlElementName"]
答案 2 :(得分:1)
如果您不使用e.preventDefault()
,则会触发表单提交的默认行为。它会将浏览器发送到表单的action
属性,浏览器将消失,您不需要它。
答案 3 :(得分:1)
您正在使用ajax,这意味着您根本不需要提交表单。如果您仍然希望在发送电子邮件后将页面重定向到about.aspx,请将您的成功功能更改为:
function successFunc(data, status) {
$('#divLoading').hide();
window.location = "about.aspx";
}
如果您允许表单的默认发布行为,则表单将在您的ajax请求完成之前发布,并且会干扰您发送的电子邮件。
作为旁注,你有两个名字约会的表格,这可能会引起你一些困惑。您的代码引用的是第一个,而不是第二个。