在 onsubmit 表单中调用 ajax 函数
call ajax function in onsubmit form
我正在使用 html 表单并使用 php 提交,但在提交之前我想使用 ajax 方法来验证和检查响应,如果响应为真则 return true else return false 所以直到检查响应 html 表单不应该被提交但是没有检查响应也表单被提交即使我使用 return
<form method="POST" action="<?= base_url('save_details/')?>" onsubmit="return validate()">
<button type="submit">Add</button>
</form>
脚本
function validate(){
$.ajax({
type: "POST",
url: "<?= base_url('validate_email') ?>",
data: {
email: email,
},
dataType: 'json',
success: function (response)
{
if (response.status) {
return true;
} else {
return false;
// some message
}
}
});
}
您遇到的第一个问题是您需要阻止标准表单提交,以便您的逻辑在允许发送请求之前等待 AJAX 请求。为此,您可以使用不显眼的事件处理程序。理想情况下,这些应该始终用于 HTML 中的内联 on*
事件属性,因为后者不再是好的做法。
第二个问题是由于异步请求,您的 return
语句实际上不会提供对 validate()
调用的响应。您需要使用异步模式来允许请求完成并根据响应执行操作。
最后,您可以提出 AJAX 请求,如果响应状态符合您要求的规则,则直接重新提交表单。试试这个:
<form method="POST" action="<?= base_url('save_details/')?>" data-emailvalidationurl="<?= base_url('validate_email') ?>">
<!-- form form controls ... -->
<button type="submit">Add</button>
</form>
jQuery($ => {
$('form').on('submit', e => {
e.preventDefault();
$.ajax({
type: "POST",
url: e.target.dataset.emailvalidationurl,
data: { email: email },
dataType: 'json',
success: function(response) {
if (response.status) {
e.target.submit(); // rule met, allow form submission
} else {
console.log('Denied...');
// show message to user here...
}
}
});
});
});
另请注意,我将电子邮件验证 URL 放在 HTML 的数据属性中。其原因与 on*
事件属性是不良做法的原因相同 - 关注点分离。您应该注意在您的 .js 文件中除了 Javascript 之外没有任何代码。
我正在使用 html 表单并使用 php 提交,但在提交之前我想使用 ajax 方法来验证和检查响应,如果响应为真则 return true else return false 所以直到检查响应 html 表单不应该被提交但是没有检查响应也表单被提交即使我使用 return
<form method="POST" action="<?= base_url('save_details/')?>" onsubmit="return validate()">
<button type="submit">Add</button>
</form>
脚本
function validate(){
$.ajax({
type: "POST",
url: "<?= base_url('validate_email') ?>",
data: {
email: email,
},
dataType: 'json',
success: function (response)
{
if (response.status) {
return true;
} else {
return false;
// some message
}
}
});
}
您遇到的第一个问题是您需要阻止标准表单提交,以便您的逻辑在允许发送请求之前等待 AJAX 请求。为此,您可以使用不显眼的事件处理程序。理想情况下,这些应该始终用于 HTML 中的内联 on*
事件属性,因为后者不再是好的做法。
第二个问题是由于异步请求,您的 return
语句实际上不会提供对 validate()
调用的响应。您需要使用异步模式来允许请求完成并根据响应执行操作。
最后,您可以提出 AJAX 请求,如果响应状态符合您要求的规则,则直接重新提交表单。试试这个:
<form method="POST" action="<?= base_url('save_details/')?>" data-emailvalidationurl="<?= base_url('validate_email') ?>">
<!-- form form controls ... -->
<button type="submit">Add</button>
</form>
jQuery($ => {
$('form').on('submit', e => {
e.preventDefault();
$.ajax({
type: "POST",
url: e.target.dataset.emailvalidationurl,
data: { email: email },
dataType: 'json',
success: function(response) {
if (response.status) {
e.target.submit(); // rule met, allow form submission
} else {
console.log('Denied...');
// show message to user here...
}
}
});
});
});
另请注意,我将电子邮件验证 URL 放在 HTML 的数据属性中。其原因与 on*
事件属性是不良做法的原因相同 - 关注点分离。您应该注意在您的 .js 文件中除了 Javascript 之外没有任何代码。