联系表格重定向防止默认不工作

Question

我已经尝试了很多不同的方法...不知道为什么仍然会重定向。我想过去我一直使用按钮而不是提交输入，因此我从未遇到过这个问题。但是，我认为是时候深入了解这一点了！

HTML 表单

<form class="col-xs-12" action="mail.php" method="POST" >
  <h2 class="headerFont">Contact</h2>
  <p>Use the form below to send to contact me via email. I will be in touch soon after receiving your message.</p>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
        <input class="col-xs-12" placeholder="Full Name" title="Enter Full Name" type="text" name="name">
        <input class="col-xs-6" placeholder="Email Address" title="Enter Email Address" type="email" name="email">
        <input class="col-xs-6" placeholder="Mobile Phone Number" title="Enter Mobile Phone Number" type="tel" name="phone">
        <input class="col-xs-12" placeholder="Street Address" title="Enter Street Address" type="text" name="address">
        <input type="text" name="_gotcha" id="_gotcha" style="display: none !important">
        <select class="col-xs-12" name="service">
            <option selected disabled>Select Service</option>
            <option>Group Walking</option>
            <option>Private Walking</option>
            <option>Pet Sitting</option>
        </select>
    </div>
    <div class="col-xs-12 col-sm-6">
        <textarea class="col-xs-12" placeholder="Message Here" rows="10" name="message"></textarea>
    </div>
  </div>
  <input type="submit" value="Send" onclick="formSubmit(e)">
</form>

JAVASCRIPT 代码

function formSubmit(e) {

        e.preventDefault();
        return false;

        console.log("Ajax Init");

        var form = e.target,
            data = new FormData(),
            xhr = new XMLHttpRequest();

        for (var i = 0, ii = form.length - 1; i < ii; ++i) {
            var input = form[i];
            data.append(input.name, input.value);
            if (input.getAttribute("name") !== "_gotcha") {
                if (input.value === "" || input.value === null || input.value === "undefined") {
                    alert("Please fill out all form fields before submitting");
                    break;
                }
            }           
        }

        xhr.open(form.method.toUpperCase(), form.action, true);
        if (document.getElementById("_gotcha").value.length == 0){
            xhr.send(data);
        } else {
            break;
        }

        xhr.onloadend = function () {
            // done
            for (var i = 0, ii = form.length - 1; i < ii; ++i) {
                var input = form[i];
                input.value = "";           
            }

            alert("Message Sent - Thank You");
        };

    };

Answer 1

似乎更好的选择是使用onsubmit attribute。

function formSubmit(form) {

  console.log("Ajax Init");

  var data = new FormData(form), // simpler
    xhr = new XMLHttpRequest();

  for (var i = 0, ii = form.length - 1; i < ii; ++i) {
    var input = form[i];
    //data.append(input.name, input.value);
    if (input.getAttribute("name") !== "_gotcha") {
      if (input.value === "" || input.value === null || input.value === "undefined") {
        alert("Please fill out all form fields before submitting");
        // something went wrong, prevent form from submitting
        return false;
      }
    }
  }

  xhr.open(form.method.toUpperCase(), form.action, true);
  if (document.getElementById("_gotcha").value.length == 0) {
    xhr.send(data);
  } else {
    // something went wrong, prevent form from submitting
    return false;
  }

  xhr.onloadend = function() {
    // done
    for (var i = 0, ii = form.length - 1; i < ii; ++i) {
      var input = form[i];
      input.value = "";
    }

    alert("Message Sent - Thank You");
  };


  // everything went ok, submit form
  return true;
};

<!-- note the use of return -->
<form class="col-xs-12" action="mail.php" method="POST" onsubmit="return formSubmit(this)">
  <h2 class="headerFont">Contact</h2>
  <p>Use the form below to send to contact me via email. I will be in touch soon after receiving your message.</p>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <input class="col-xs-12" placeholder="Full Name" title="Enter Full Name" type="text" name="name">
      <input class="col-xs-6" placeholder="Email Address" title="Enter Email Address" type="email" name="email">
      <input class="col-xs-6" placeholder="Mobile Phone Number" title="Enter Mobile Phone Number" type="tel" name="phone">
      <input class="col-xs-12" placeholder="Street Address" title="Enter Street Address" type="text" name="address">
      <input type="text" name="_gotcha" id="_gotcha" style="display: none !important">
      <select class="col-xs-12" name="service">
            <option selected disabled>Select Service</option>
            <option>Group Walking</option>
            <option>Private Walking</option>
            <option>Pet Sitting</option>
        </select>
    </div>
    <div class="col-xs-12 col-sm-6">
      <textarea class="col-xs-12" placeholder="Message Here" rows="10" name="message"></textarea>
    </div>
  </div>
  <!-- upon clicking on the submit button, it will trigger the form's onsubmit handler -->
  <input type="submit" value="Send">
</form>

Answer 2

我建议在核心 javascript 中使用 jquery，因为在 javascript 中它会混合想要编写的代码，我在 jquery 中为您编写

第 1 步：：为表单标签提供 id id="myForm"

第 2 步：：这样编写脚本

<script>
  $('#myForm').submit(function(e){

          e.preventDefualt();
          data = $(this)..serialize();

 });
</script>