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 CODE

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。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

我建议在javascript中使用jquery核心javascript，因为它想要写，我在jquery为你写的

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

第2步：：像这样编写脚本

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

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

 });
</script>

联系表单重定向防止默认不起作用

2 个答案: