我對 JavaScript 的了解有限，但通過一些復制和粘貼，我設法制作了一個通過 AJAX 發送的表單。
我也在運行標準的 Boostrap 5 輸入驗證。這一切都很好，直到我發現 AJAX 火災，即使沒有一些欄位丟失。
然后我嘗試將 AJAX 的東西放在驗證函式中，但現在我需要按兩次“提交”。我明白為什么，但我不知道如何解決它，需要一些幫助。
這就是我想出的：
(function () {
'use strict'
// Fetch all the forms we want to apply validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
var frm = $('#orderform');
frm.submit(function (e) {
var formData = {
firstName_r: jQuery('#firstName_r').val(),
lastName_r: jQuery('#lastName_r').val(),
action:'the_ajax_mail'
};
$.ajax({
type : 'POST',
url : "<?php echo admin_url('admin-ajax.php'); ?>",
data : formData,
encode : true
}).done(function(data) {
console.log(data);
form.classList.remove('was-validated');
document.getElementById('submitForm').disabled = true;
}).fail(function(data) {
console.log(data);
});
e.preventDefault();
});
}, false)
})
})()
我知道需要去的部分var frm = $('#orderform');，frm.submit(function (e) {但我不知道如何......
uj5u.com熱心網友回復：
嘗試這個
(function() {
'use strict'
// Fetch all the forms we want to apply validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
return
}
form.classList.add('was-validated')
var formData = {
firstName_r: jQuery('#firstName_r').val(),
lastName_r: jQuery('#lastName_r').val(),
action: 'the_ajax_mail'
};
$.ajax({
type: 'POST',
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: formData,
encode: true
}).done(function(data) {
console.log(data);
form.classList.remove('was-validated');
document.getElementById('submitForm').disabled = true;
}).fail(function(data) {
console.log(data);
});
e.preventDefault();
}, false)
})
})()
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/498252.html
標籤：javascript jQuery 阿贾克斯