[英]Form submit button is redirecting instead of submitting
I am trying to customize a Google form with css and js and am running into a roadblock.我正在尝试使用 css 和 js 自定义 Google 表单,但遇到了障碍。 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";
}
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.添加了一个示例,说明如何在提交之前检查表单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.