Кнопка отправки формы перенаправляет вместо отправки

Question

Я пытаюсь настроить форму Google с помощью css и js и сталкиваюсь с препятствиями. Когда я дохожу до конца формы и отправляю, вместо отправки она автоматически перенаправляет на форму Google с заполненной информацией, где мне затем нужно нажать «отправить» в форме Google.

Что вызывает перенаправление формы вместо отправки с моего сайта?

<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

Похоже, вы проверяете форму на каждом шаге. Рассмотрим следующий код.

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

Добавлен пример того, как вы можете проверить форму перед ее отправкой.