在Firefox中,当type=submit for按钮时,请求服务器失败
Request to server fails in Firefox when type=submit for button
我的html代码将请求发送到php以发送电子邮件。在我的情况下,电子邮件可以在谷歌Chrome中发送;Edge,但在Firefox中没有,当我设置按钮类型=提交时,当我更改类型=按钮时,它工作得很好。我的javascript代码是:
function Send() {
var allset = true;
var namevalid = true;
var emailvalid = false;
var commentvalid = false;
var sent = 0;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
if ($("#email").val() == '' || $("#email").val() == null) {
$("#email").addClass("invalid");
allset = false;
}
else {
if (!$("#email").val().match(emailPattern)) {
$("#email").removeClass("valid");
$("#email").addClass("invalid");
allset = false;
}
else {
emailvalid = true;
$("#email").addClass("valid");
}
}
if ($("#comment").val() == '' || $("#comment").val() == null) {
$("#comment").addClass("invalid");
allset = false;
}
else {
commentvalid = true;
$("#comment").addClass("valid");
}
$("#name").addClass("valid");
if (namevalid === true && emailvalid === true && commentvalid === true) {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var demo = document.getElementById("sel1").value;
var comment = document.getElementById("comment").value;
alert("Request Successfully Received");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(xhttp.responseText)
}
};
sent = 1;
xhttp.open("POST", "email.php?" + "name=" + name + "&mail=" + email + "&phone=" + number + "&msg=" + comment + "&demo=" + demo, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();
}
else
{
alert("Please fill all the fields correctly");
}
}
我的表单按钮html是:
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="number">
<input type="text" name="telephone" maxlength="30" class="feedback-input" size="30" id="number" placeholder="Number">
</p>
<p class="number" id="demotype">
<select class="form-control feedback-input demotype" id="sel1" name="demo">
<option> something </option>
</select>
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" id="button-blue" onclick="Send()" value="Send" />
<div class="ease"></div>
</div>
</form>
"type=submit"基本上是用于提交表单的,"type=button"只是一个与某些函数绑定的按钮。如果没有任何窗体作为其父元素,并且单击按钮时发生错误,我建议您使用"type=button"。
只需在函数末尾添加return false;
,因为submit
按钮会提交表单。
function Send() {
var allset = true;
var namevalid = true;
var emailvalid = false;
var commentvalid = false;
var sent=0;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/;
if ($("#email").val() == '' || $("#email").val() == null) {
$("#email").addClass("invalid");
allset = false;
}
else {
if (!$("#email").val().match(emailPattern)) {
$("#email").removeClass("valid");
$("#email").addClass("invalid");
allset = false;
}
else {
emailvalid = true;
$("#email").addClass("valid");
}
}
if ($("#comment").val() == '' || $("#comment").val() == null) {
$("#comment").addClass("invalid");
allset = false;
}
else {
commentvalid = true;
$("#comment").addClass("valid");
}
$("#name").addClass("valid");
if (namevalid === true && emailvalid === true && commentvalid === true) {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var demo=document.getElementById("sel1").value;
var comment = document.getElementById("comment").value;
alert("Request Successfully Received");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(xhttp.responseText)
}
};
sent=1;
xhttp.open("POST", "email.php?"+"name="+name+"&mail="+email+"&phone="+number+"&msg="+comment+"&demo="+demo, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();
}
else
{
alert("Please fill all the fields correctly");
}
return false;
}
相关文章:
- 从Django中同一页面上的多个按钮启动AJAX请求
- 如何在点击提交按钮的url中发布xml格式请求
- jQuery在单击按钮时中止所有AJAX请求(query)
- 使用 PHP 生成的按钮生成 POST 请求,这些按钮调用带有参数的 javascript 函数
- 当按下浏览器后退按钮时,如何用相同的post参数激发ajax请求
- 在jQuery中的GET请求中使用发送按钮
- 点击按钮从服务器nodejs请求数据
- 我如何才能获得隐藏/取消隐藏按钮来同时发送帖子请求
- 在Firefox中,当type=submit for按钮时,请求服务器失败
- 如何显示弹出窗口以在使用纯 JavaScript 从 Web 服务器获取/请求数据时禁用搜索按钮
- 如何获取按钮以在引导程序中触发 Ajax 请求
- 如何在一个按钮单击上发出两个依赖的 AJAX 请求
- 单击“更新”按钮后,请求不以“放置”形式进行,而是以“POST”形式发送
- 如何恢复 ajax 中按钮的初始值请求成功
- 创建一个按钮,该按钮将使用随机查询字符串向 URL 发出请求
- PHP中有什么方法可以检测请求是否来自浏览器后退按钮
- 在按钮值中放置 ajax 请求
- 如何在单击带有 2 个按钮的表单中单击按钮时发送 Ajax 请求
- 如何在 javascript 中单击登录按钮时通过发布请求验证登录
- 如何在服务器处理 RoR/JQuery 中的请求时禁用按钮