Question

我的html代码将请求发送给php发送电子邮件。在我的情况下，电子邮件可以在谷歌浏览器中发送。当我设置按钮类型=提交时，边缘但不在Firefox中，当我更改type =按钮时，它工作正常。我的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");
    }


}

我的表格按钮是：

 <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>

Answer 1

＆＃39;类型=提交＆＃39;基本上是用于提交表格和＆＃39; type = button＆＃39;只是一个与某些功能绑定的按钮。如果您没有任何表单作为其父元素，并且单击按钮时发生错误，我建议您使用＆＃39; type = button＆＃39;代替。

Answer 2

只需在功能结束时添加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;

 }

当type = submit for button时，Firefox中的服务器请求失败

2 个答案: