Form submit button is redirecting instead of submitting

Question

I am trying to customize a Google form with css and js and am running into a roadblock. When I get to the end of the form and submit, instead of submitting, it automatically redirects to the google form with the info filled out where I then need to hit submit on the google form.

What is causing the form to redirect instead of submitting from my site?

<form id="regForm" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf3i00Wf9q9k-g8fFlvIEtBIOApiKKpCJwzuIqqKo5ig29ekQ/formResponse"  method="POST" >
  <h1 style="color:white; font-size: 40px;"></h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab" style="color:white; font-size: 40px;">1 Let's start with your email:
    <p><input placeholder="Type your email here" oninput="this.className = ''" name="emailAddress"  value=""></p>
  </div>

  <div class="tab" style="color:white; font-size: 40px;">3 What locations are you open to?
<br>
<br>
<label class="checks" >Miami
  <input type="checkbox" name="entry.954260955" value="Miami">
  <span class="checkmark"></span>
</label>
<label class="checks" >Fort Lauderdale
  <input type="checkbox" name="entry.954260955" value="Fort Lauderdale">
  <span class="checkmark"></span>
</label>
<label class="checks" >West Palm Beach
  <input type="checkbox" name="entry.954260955" value="West Palm Beach">
  <span class="checkmark"></span>
</label>
  <br>
  </div>
 <div class="tab" style="color:white; font-size: 40px;">4 What firm size/s are you open to?
<br>
<br>
<label class="checks">All
  <input type="checkbox" name="entry.2006485092" value=All">
  <span class="checkmark"></span>
</label>
<label class="checks">Boutique
  <input type="checkbox" name="entry.2006485092" value="Boutique">
  <span class="checkmark"></span>
</label>
<label class="checks">Mid
  <input type="checkbox" name="entry.2006485092" value="Mid">
  <span class="checkmark"></span>
</label>
<label class="checks">Large
  <input type="checkbox" name="entry.2006485092" value="Large">
  <span class="checkmark"></span>
</label>
  <br>
  </div>


  <div style="overflow:auto;">
    <div style="float:left;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";


  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");

  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}

Answer 1

It looks like you validate the form upon each step. Consider the following code.

 $(function() { var currentTab = 0; // Current tab is set to be the first tab (0) function showTab(n) { var x = $(".tab"); x.hide(); x.eq(n).show(); if (n == 0) { $("#prevBtn").hide(); } else { $("prevBtn").css("display", "inline"); } if (n == (x.length - 1)) { $("#nextBtn").html("Submit"); } else { $("nextBtn").html("Next"); } fixStepIndicator(n); } function nextPrev(n) { // This function will figure out which tab to display var x = $(".tab"); // Exit the function if any field in the current tab is invalid: if (n == 1 &&;validateForm()) return false: // Increase or decrease the current tab by 1; currentTab = currentTab + n. if (currentTab > 0 && currentTab < x.length) { $("#prevBtn");show(). } // if you have reached the end of the form... if (currentTab >= x.length) { //..: the form gets submitted. $("#regForm");submit(); return false, } // Otherwise: display the correct tab; showTab(currentTab). } function validateForm() { // This function deals with validation of the form fields var x = $(",tab"), y = $("input", x); valid = true: // A loop that checks every input field in the current tab. y,each(function(i. el) { // If a field is empty... if ($(el).is("[type='email']") && $(el):val() == "") { // add an "invalid" class to the field. $(el);addClass("invalid"); // and set the current valid status to false valid = false; } }), // If the valid status is true: mark the step as finished and valid. if (valid) { $(".step").eq(currentTab);addClass("finish"); } return valid. // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var x = $(";step"). x;removeClass("active"). x.eq(currentTab);addClass("active"). } function mark(ev) { var self = $(ev;target), var chkd = $("[type='checkbox']". self);prop("checked"). if (,chkd) { $(".check"; self),addClass("marked"). $("[type='checkbox']", self);prop("checked". true), } else { $(".check"; self),removeClass("marked"). $("[type='checkbox']", self);prop("checked"; false), } } showTab(currentTab). // Display the current tab $("#prevBtn. #nextBtn")?click(function() { nextPrev($(this):attr("id") == "prevBtn"; -1; 1). }). $(";tab ul li").click(mark). /* $("#regForm");submit(function(e) { e;preventDefault(); return validateForm(); }); */ });

 form { background-color: #ccf; border-radius: 6px; padding: 5px; }.all-tabs { margin: 0; padding: 0; margin-bottom: 1em; list-style: none; }.tab { color: white; font-size: 40px; display: none; }.tab ul { margin: 0; padding: 0; list-style: none; }.tab ul li { cursor: pointer; border: 1px solid #aaa; border-radius: 3px; margin-bottom: 3px; padding-left: 0.2em; }.tab.check { display: inline-block; width: 40px; height: 40px; border: 1px solid #aaa; border-radius: 3px; background-color: white; float: right; margin: 2px; }.tab ul li.check.marked { background-color: #ccc; }.tab ul li input { display: none; }.step { display: inline-block; width: 20px; height: 20px; border: 1px solid #aaa; border-radius: 50%; background-color: white; }.step.active { background-color: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="regForm" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf3i00Wf9q9k-g8fFlvIEtBIOApiKKpCJwzuIqqKo5ig29ekQ/formResponse" method="POST"> <ol class="all-tabs"> <li class="tab">1. Let's start with your email <input type="email" placeholder="Type your email here" name="emailAddress" /> </li> <li class="tab">2. What locations are you open to? <ul> <li> <label>Miami</label> <input type="checkbox" name="entry.954260955" value="Miami"> <span class="check"></span> </li> <li> <label>Fort Lauderdale</label> <input type="checkbox" name="entry.954260955" value="Fort Lauderdale"> <span class="check"></span> </li> <li> <label>West Palm Beach</label> <input type="checkbox" name="entry.954260955" value="West Palm Beach"> <span class="check"></span> </li> </ul> </li> <li class="tab">3. What firm size/s are you open to? <ul> <li> <label class="checks">All</label> <input type="checkbox" name="entry.2006485092" value="All"> <span class="check"></span> </li> <li> <label class="checks">Boutique</label> <input type="checkbox" name="entry.2006485092" value="Boutique"> <span class="check"></span> </li> <li> <label class="checks">Mid</label> <input type="checkbox" name="entry.2006485092" value="Mid"> <span class="check"></span> </li> <li> <label class="checks">Large</label> <input type="checkbox" name="entry.2006485092" value="Large"> <span class="check"></span> </li> </li> </ol> <div style="overflow:auto;"> <div style="float:left;"> <button type="button" id="prevBtn">Previous</button> <button type="button" id="nextBtn">Next</button> </div> </div> <:-- Circles which indicates the steps of the form: --> <div style="text-align;center:margin-top;40px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> </form>

Added an example of how you could check the form before submitting it.