Open siferiandude12 opened 2 years ago
iharpe18
commented
2 years ago Same. I tried adding:
finally { lock.releaseLock() window.location.href = "http://google.com"; }
But since this script is firing externally from google scripts "window" is undefined.
Maheshcheegiti
commented
2 years ago Same Problem
iharpe18
commented
2 years ago I fixed it by adding this to the html and not the google script:
<script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { const yourForm = document.getElementById('SurveyForm'); yourForm.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(yourForm); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { window.location.replace('https://www.WEBSITE.com/thank-you') }) }) }); </script>
siferiandude12
commented
2 years ago I fixed it by adding this to the html and not the google script:
Where did you add that in the HTML? Was it inside the form action, or outside the form action brackets?
iharpe18
commented
2 years ago I put it after the input type = submit outside of the form.
ashloren
commented
2 years ago In case anyone wants to add dropdown selects, it worked fine for me.
Here is my form: https://abortourcourt.com/responsive-form
And the spreadsheet: https://docs.google.com/spreadsheets/d/1PTdsv6qT4KnhWWfac0OhjH_KC7deNH_uIuWw5_seAwA/edit?usp=sharing
trjjnhrs
commented
1 year ago I fixed it by adding this to the html and not the google script:
<script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { const yourForm = document.getElementById('SurveyForm'); yourForm.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(yourForm); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { window.location.replace('https://www.WEBSITE.com/thank-you') }) }) }); </script>
This worked. For those wondering how to implement this... Literally copy all of this and paste it at the bottom of your HTML document that has your form. Inside your <form></form>, add the following:
<form id="SurveyForm"></form>
roboes
commented
1 year ago I fixed it by adding this to the html and not the google script:
<script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { const yourForm = document.getElementById('SurveyForm'); yourForm.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(yourForm); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { window.location.replace('https://www.WEBSITE.com/thank-you') }) }) }); </script>This worked. For those wondering how to implement this... Literally copy all of this and paste it at the bottom of your HTML document that has your form. Inside your
<form></form>, add the following:
<form id="SurveyForm"></form>
It also worked for me. Here's the full code (without the Google Apps script URL):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form
id="SurveyForm"
method="POST"
action="YOUR_GOOGLE_SCRIPT_URL"
>
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Send</button>
</form>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() { const yourForm = document.getElementById('SurveyForm'); yourForm.addEventListener("submit", function(e) { e.preventDefault(); const data = new FormData(yourForm); const action = e.target.action; fetch(action, { method: 'POST', body: data, }) .then(() => { window.location.replace('https://www.WEBSITE.com/thank-you') }) }) });
</script>
</body>
</html>Update (June 11, 2023): This trick is not working anymore. I am now using SheetDB service. Here is a working code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form
id="SurveyForm"
method="POST"
action="YOUR_SHEETDB_SCRIPT_URL"
>
<input id="Date" name="Date" type="hidden" readonly="readonly">
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Send</button>
</form>
<script>
// Get current Date
var date_today = new Date().toISOString().slice(0, 10)
document.getElementById("Date").value = date_today.toString();
var form = document.getElementById('SurveyForm');
form.addEventListener("submit", e => {
e.preventDefault();
fetch(form.action, {
method : "POST",
body: new FormData(document.getElementById("SurveyForm")),
}).then(
response => response.json()
).then((html) => {
// you can put any JS code here
window.location.replace('https://www.WEBSITE.com/thank-you')
});
});
</script>
</body>
</html>
fnooub
commented
1 month ago 10/2024 it works fine for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Alert</title>
</head>
<body>
<form
id="SurveyForm"
method="POST"
action="https://script.google.com/macros/s/YOUR_GOOGLE_SCRIPT_URL/exec"
>
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Send</button>
</form>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
const yourForm = document.getElementById('SurveyForm');
yourForm.addEventListener("submit", function(e) {
e.preventDefault();
const data = new FormData(yourForm);
const action = e.target.action;
fetch(action, {
method: 'POST',
body: data,
})
.then(() => {
alert('Form submitted successfully!');
})
.catch(() => {
alert('There was an error submitting the form.');
});
});
});
</script>
</body>
</html>
This is a fantastic overview, and it works great. The only issue I have is finding a way to redirect the page to another URL after submission.
It returns a success page, however it does not redirect.
What code would I need to add inside of this Javascript to redirect the user, instead of them seeing the message above?
Thanks!