我有一个通过 php-ajax 发送表单的脚本。它确实返回成功,但成功后我需要它做的是清除所有表单数据并关闭 div 并加载另一个。我尝试了许多不同的方法来清除表单和关闭 div,但它们似乎完全阻止了它的工作。要关闭的 div 的 id 是“5box”我需要添加这些的工作脚本是:
$(document).ready(function() {
$('#btn-finish').on('click', function() {
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
}
}
});
// Prevent default submission of the form after clicking on the submit button.
return false;
});
});
任何想法将不胜感激
最佳答案
要清除表格,您可以调用 reset()
底层元素的方法。我不确定“关闭 div”是什么意思,但您可以调用 hide()
让它消失。试试这个:
success: function(result) {
if (result == 'success') {
$('.output_message').text('Message Sent!');
form[0].reset();
$('#5box').hide();
} else {
$('.output_message').text('Error Sending email!');
}
}
另请注意,从 AJAX 调用返回 JSON 是更好的做法。然后,您可以使用 bool 标志来显示请求的状态。
更新
<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>
鉴于这是您按钮的代码,还有另一个问题 - 您没有阻止表单提交,因此 AJAX 请求被取消。为此,请 Hook submit
表单的事件而不是按钮的单击。从那里您可以调用 e.preventDefault()
停止表单提交。试试这个:
<script>
$(function() {
$('form').on('submit', function(e) {
e.preventDefault();
$('.output_message').text('Processing...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result) {
if (result == 'success') {
$('.output_message').text('Message Sent!');
form[0].reset();
$('#5box').hide();
} else {
$('.output_message').text('Error Sending email!');
}
}
});
});
});
</script>
注意我使用了通用的 'form'
上面的选择器。您可以根据需要将其更改为表单上的类或 ID 选择器。
关于javascript - 成功发布后清除表单并关闭 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42782358/