在Firefox中,当type=submit for按钮时,请求服务器失败

Request to server fails in Firefox when type=submit for button

本文关键字:按钮 请求 for 服务器 失败 Firefox type submit      更新时间:2023-09-26

我的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;
 }