Я разрабатываю процесс, который включает в себя несколько форм. Идея состоит в том, что всякий раз, когда вы нажимаете кнопку отправки любой формы, после проверки всех введенных данных, мой js будет скрывать уже заполненную форму, чтобы показать новую.
Проблема заключается в что всякий раз, когда я нажимаю кнопку отправить, запрос запускается шесть раз, вставляя одни и те же данные снова и снова. В коде нет l oop, поэтому я предполагаю, что это как-то связано с этим слушателем:
contactForm.addEventListener('submit', function(event) {
, расположенным здесь:
var validation = Array.prototype.filter.call(contactForm, function(form) {
contactForm.addEventListener('submit', function(event) {
if (contactForm.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
Я не уверен, однако, поскольку позже я попытался внести некоторые изменения безрезультатно.
В любом случае, это код, с которого я начал:
(function() {
'use strict';
window.addEventListener('load', function() {
var contactForm = document.getElementById('contactForm');
var customerForm = document.getElementById('customerForm');
var validation = Array.prototype.filter.call(contactForm, function(form) {
contactForm.addEventListener('submit', function(event) {
if (contactForm.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
contactForm.classList.add('was-validated');
if (contactForm.checkValidity() === true) {
customerForm.style.display = 'block';
contactForm.style.display = 'none';
event.preventDefault();
(function() {
var contactEmail = document.getElementById('contactEmail').value;
var contactResellerId = 2;
var contactName = document.getElementById('contactName').value;
var contactLastName = document.getElementById('contactLastName').value;
var contactCompany = document.getElementById('contactCompany').value;
var contactRegNum = document.getElementById('contactRegNum').value;
$.ajax({
url: url,
method: 'POST',
crossDomain: true,
withCredentials: true,
data: JSON.stringify({
firstname: contactName,
lastname: contactLastName,
company: contactCompany,
email: contactEmail,
reseller_id: contactResellerId,
comregnum: contactRegNum
}),
dataType: 'json',
contentType: 'application/json',
headers: {
'Authorization': 'Basic '+token,
}
})
.done(function (response) { alert('Se ha creado el contacto!'); })
.fail(function (jqXHR, textStatus, errorThrown) { alert(jqXHR); });
})();
}
}, false);
});
}, false);
})();
И это то, что у меня сейчас есть:
(function() {
'use strict';
window.addEventListener('load', function() {
var contactForm = document.getElementById('contactForm');
var customerForm = document.getElementById('customerForm');
var submitContact = document.getElementById('submitContact');
var validation = Array.prototype.filter.call(contactForm, function(form) {
submitContact.addEventListener('click', function(event) {
if (contactForm.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
contactForm.classList.add('was-validated');
if (contactForm.checkValidity() === true) {
event.preventDefault();
customerForm.style.display = 'block';
contactForm.style.display = 'none';
(function() {
var contactEmail = document.getElementById('contactEmail').value;
var contactResellerId = 2;
var contactName = document.getElementById('contactName').value;
var contactLastName = document.getElementById('contactLastName').value;
var contactCompany = document.getElementById('contactCompany').value;
var contactRegNum = document.getElementById('contactRegNum').value;
$.ajax({
url: url,
method: 'POST',
crossDomain: true,
withCredentials: true,
data: JSON.stringify({
firstname: contactName,
lastname: contactLastName,
company: contactCompany,
email: contactEmail,
reseller_id: contactResellerId,
comregnum: contactRegNum
}),
dataType: 'json',
contentType: 'application/json',
headers: {
'Authorization': 'Basic '+token,
}
})
.done(function (response) { alert('Se ha creado el contacto!'); })
.fail(function (jqXHR, textStatus, errorThrown) { console.log(jqXHR); });
})();
}
}, false);
});
}, false);
})();
Это форма, из которой мы получаем информацию:
<form class="needs-validation provisioningForm" id="contactForm" novalidate>
<h2 class="title">Crear Contacto</h2>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="contactName">Nombre</label>
<input type="text" class="form-control" id="contactName" required>
<div class="invalid-feedback">
Debes introducir el nombre del contacto.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="contactLastName">Apellidos</label>
<input type="text" class="form-control" id="contactLastName" required>
<div class="invalid-feedback">
Debes introducir los apellidos del contacto.
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-4">
<label for="contactEmail">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="contactEmail" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Debes introducir un correo válido.
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<label for="contactCompany">Empresa</label>
<input type="text" class="form-control" id="contactCompany" required>
<div class="invalid-feedback">
Debes introducir el nombre de la empresa.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="contactRegNum">C.I.F.</label>
<input type="text" class="form-control" id="contactRegNum" required>
<div class="invalid-feedback">
Debes incluir el CIF de la empresa.
</div>
</div>
</div>
<button id="submitContact" class="btn btn-success" type="submit">Enviar</button>
</form>
Несколько заметок:
все работает нормально. Нет предупреждений / ошибок, отображаемых на консоли. Проблема заключается в том, что запрос POST выполняется 6 раз.
Есть 5 форм с 5 кнопками отправки и всего 5 функций. У всех разные идентификаторы. Как я уже говорил в начале, я полагаю, что причиной является прослушиватель событий, помещенный в 'submit'. Я думаю, что, поскольку другие формы просто скрыты, но там, возможно, принимаются другие представления. Но после попытки сохранить их в отдельных переменных и поместить в них прослушиватель .click и получить тот же результат, я еще больше запутался.
Если вам понадобится дополнительная информация, я отправлю ее сразу. Спасибо всем за ваше время и помощь.