Contact Form Redirecting Prevent Default Not Working

Question

I've tried this many different ways... don't know why this is redirecting still. I suppose in the past I've always used a button instead of a submit input and as such I never ran into this issue. However, I think it's time to get to the bottom of this!

HTML FORM

<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");
        };

    };

If I am writing all the code in plain Javascript its safe to assume im looking for a Javascript only solution. Just as someone using React writing react code doesn't want an Angular solution. — Michael Paccione, Mar 23 '18 at 04:51

Mikey · Answer 1 · 2018-03-17T04:35:04.930

It seems a better option is to use 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>

Correct, the proper use is `return formSubmit(this)` and that would work on `onclick` as well. — Tasos K., Mar 17 '18 at 05:04

score -1 · Answer 2 · answered Mar 17 '18 at 04:56

-1

i suggest to use jquery inside of core javascript becuase in javascript it to mush code want to write , i write for you in jquery

step 1: : give id to form tag id="myForm"

step 2: : write script like this

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

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

 });
</script>

answered Mar 17 '18 at 04:56

Ravindra Bhanderi

2,478
4
17
29

I know how to use jQuery, I choose not to because I can have less files to load. Javascript is fine. – Michael Paccione Mar 17 '18 at 22:19

Contact Form Redirecting Prevent Default Not Working

2 Answers2