I had an HTML form and on submit of form it'll redirect to (success.html) page which I've added in Google Apps Script and also sends data to Google Sheets.
Now I want to remove my success.html from Google Apps Script and add as client side on same hierarchy level of index.html (form page).
Success.html:
<!DOCTYPE html>
<html>
<head>
<title>Thank You!</title>
</head>
<body>
<h1>Thank you for submitting the form!</h1>
<h2><?= serialNumber ?></h2>
</body>
</html>
Index.html:
<form id="form">
<label for="name">Name:</label>
<input name="name" id="name" type="text"><br><br>
<label for="email">Email:</label>
<input name="email" id="email" type="email"><br><br>
<label for="uploadfile">File:</label>
<input name="file" id="uploadfile" type="file"><br><br>
<label for="filename">File Name:</label>
<input name="filename" id="filename" type="text"><br><br>
<input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventListener('submit', e => {
e.preventDefault();
const name = form.name.value;
const email = form.email.value;
const file = form.file.files[0];
if (!file) {
const url = "https://script.google.com/macros/s/###/exec"; // Please replace this with your Web Apps URL.
const qs = new URLSearchParams({filename: "", mimeType: "", name: name || "", email: email || ""});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([])})
.then(res => res.json())
.then(e => {
window.open(url, '_self');
})
.catch(err => console.log(err));
return;
}
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = f => {
const url = "https://script.google.com/macros/s/###/exec"; // Please replace this with your Web Apps URL.
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type, name: name || "", email: email || ""});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json())
.then(e => {
window.open(url, '_self');
})
.catch(err => console.log(err));
}
});
</script>
Expected: On form submission it should redirect to client side success page (e.g. path=/success.html).
And also Serial number should be captured in real-time.
Note: this question is related to my previous question.
