У меня есть форма Bootstrap 4, использующая проверку, используя "стартер" javascript, найденный на их веб-сайте: https://getbootstrap.com/docs/4.4/components/forms/#validation.
Эта форма существует внутри Боковая панель надстроек Документов Google. Когда форма отправляется, я не вызываю другой URI, а хочу только собрать информацию из формы и затем работать с ней, используя скрипт Google Apps.
Правильно проверяется стартер javascript поля формы, но когда форма отправляется, открывается новая вкладка браузера, чего я не хочу.
Я изменил приведенный ниже стартовый код только для вызова собственной функции изнутри ' остальная часть. В настоящее время моя функция submitFeedback () делает только отправку оповещения, чтобы сообщить, что выполнение кода достигло этой точки, но в то же время выполнение передается функции submitFeedback (), в браузере открывается новая вкладка.
Как предотвратить открытие этой новой вкладки браузера при отправке формы?
<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>
<div class="form-group">
<label for="frmLastName">Last name</label>
<input type="text" class="form-control" id="frmLastName" placeholder="Last name" required>
<div class="invalid-feedback">
Please enter your last name.
</div>
</div>
<div class="form-group">
<label for="frmEmail">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="frmEmail" placeholder="user@domain.com" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
</div>
<div class="form-group">
<label for="frmCategory">What's on your mind?</label>
<select id="frmCategory" class="custom-select form-control" required>
<option value="">- Select -</option>
<option value="1">I have a question</option>
<option value="2">I have an idea</option>
<option value="3">I have a compliment</option>
<option value="4">I found a problem :(</option>
</select>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
<div class="form-group">
<label for="frmDetails">Tell us all about it...</label>
<textarea id="frmDetails" class="form-control" rows="3" placeholder="Enter your comments here" required></textarea>
<div class="invalid-feedback">
Please provide your comments here.
</div>
</div>
<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() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
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 to gather and process data from form
function submitFeedback(){
alert ('inside feedback function');
}
</script>