I recently integrated a Bootstrap 4 form with validation using the provided "starter" JavaScript code available on their official website: https://getbootstrap.com/docs/4.4/components/forms/#validation.
This form is located within a sidebar of a Google Docs add-on. Upon form submission, I do not intend to redirect to another URL. Instead, I aim to collect the form data and handle it using Google Apps Script.
Despite the validation of form fields working as expected with the starter JavaScript, after submitting the form, a new browser tab opens, which is not the desired behavior.
I made a modification to the starter code below where I call my custom function from within the 'else' block. Presently, my function, submitFeedback(), only triggers an alert confirmation, yet upon invoking submitFeedback(), a new tab pops up in the browser.
How can I prevent this new browser tab from opening each time the form is submitted?
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="frmFirstName">First name</label>
<input type="text" class="form-control" id="frmFirstName" placeholder="First name" required>
<div class="invalid-feedback">
Please enter your first name.
</div>
</div>
... (Remaining form fields)
<button class="btn btn-primary btn-sm" type="submit">Submit form</button>
</form>
...
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
submitFeedback();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function submitFeedback(){
alert ('inside feedback function');
}
</script>