AJAX调用后刷新表单

Question

背景

我有一个网站上的电子邮件注册表。

表单显示在每个网页的两个区域：页眉和页脚

它是完全相同的形式，只是在页面的顶部和底部提供，以获得更好的用户体验和可访问性。

该表单使用jQuery/AAJAX脚本向用户提供成功和错误响应。(即"成功！您的订阅已完成。"one_answers"错误。请查看并重新提交"(

当用户提交表单时，用户输入将添加到数据库中，并向站点管理员发送通知电子邮件。

如果使用标题形式，则电子邮件主题为"；电子邮件订阅者添加(标题形式("；。

如果使用页脚形式，则主题为"；电子邮件订阅者添加(页脚形式("；。

(这只是一种简单的技术，可以让管理员衡量每个表单的使用情况。(

以下是PHP的样子：

if ( $form_selected == 'header' ) {

$mail->Subject = 'Email Subscriber Added (Header Form)';
$mail->Body = $message;
} elseif ( $form_selected == 'footer' ) {

$mail->Subject = 'Email Subscriber Added (Footer Form)';
$mail->Body = $message;
} else {
$mail->Subject = 'Email Subscriber Added (form version unknown)';
$mail->Body = $message; 
}

到目前为止，一切都很好。

---

问题

问题是，如果站点用户在同一会话中提交多个电子邮件订阅，则站点管理员会在上面的PHP脚本中获得else版本("表单版本未知"(。在正常会话期间不应调用此选项。但是，在再次考虑if和elseif选项之前，需要刷新页面。

---

问题

有没有办法在jQuery/AAJAX脚本中解决这个问题(见下文(？如果有必要，我也愿意修改PHP。

$(function() {
// set up event listener
$('#header-form, #footer-form').submit(function(e) {
// disable html submit button
e.preventDefault();
// get the submit button
var submitButton = $('[type=submit]', this);
// get the messages element
var formResponses = $('#header-form-responses, #footer-form-responses', this);
formResponses.text(" ");
// serialize form data
var formData = $(this).serialize();
// disable submit button to prevent unnecessary submission
submitButton.attr('disabled', 'disabled');
// tell users that form is sending
submitButton.text('Processing...');
// submit form via AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: formData
})
.done(function(response) {
// make sure formResponses element has 'success' class
$(formResponses).removeClass('error');
$(formResponses).addClass('success');
// set message text
$(formResponses).text('Your subscription is complete. Thank you!');
// clear form
$('input').val('');
})
.fail(function(data) {
// make sure formResponses element has 'error' class
$(formResponses).removeClass('success');
$(formResponses).addClass('error');
// set the message text
$(formResponses).text('Input error. Please review and re-submit.');
})
.always(function(data) { // this will always fire even if the request fails
submitButton.removeAttr('disabled');
submitButton.text('Send');
});
});
});

<!-- simplified HTML -->
<form action="process_form.php" method="post" id="header-form">
<input type="email" name="email_subscription">
<input type="hidden" name="formtarget" value="header">
<button type="submit" name="submit_subscription">Submit (Header)</button>
<p id="header-form-responses"></p>
</form>
<form action="process_form.php" method="post" id="footer-form">
<input type="email" name="email_subscription">
<input type="hidden" name="formtarget" value="footer">
<button type="submit" name="submit_subscription">Submit (Footer)</button>
<p id="footer-form-responses"></p>
</form>

Answer 1

如果其中包含触发PHPif条件的数据：

<input type="hidden" name="formtarget" value="header">

然后这就是明确清除数据：

// clear form
$('input').val('');

相反，只清除要清除的字段：

// clear form
$('input[type="email"]').val('');

Answer 2

使用$('input:not([type="hidden"]('(.val(''(排除清除隐藏的输入。您的JS正在清除所有输入，包括隐藏的输入。

$(function() {
// set up event listener
$('#header-form, #footer-form').submit(function(e) {
// disable html submit button
e.preventDefault();
// get the submit button
var submitButton = $('[type=submit]', this);
// get the messages element
var formResponses = $('#header-form-responses, #footer-form-responses', this);
formResponses.text(" ");
// serialize form data
var formData = $(this).serialize();
// disable submit button to prevent unnecessary submission
submitButton.attr('disabled', 'disabled');
// tell users that form is sending
submitButton.text('Processing...');
// submit form via AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: formData
})
.done(function(response) {
// make sure formResponses element has 'success' class
$(formResponses).removeClass('error');
$(formResponses).addClass('success');
// set message text
$(formResponses).text('Your subscription is complete. Thank you!');
// clear form except hidden inputs
$('input:not([type="hidden"])').val('')
})
.fail(function(data) {
// make sure formResponses element has 'error' class
$(formResponses).removeClass('success');
$(formResponses).addClass('error');
// set the message text
$(formResponses).text('Input error. Please review and re-submit.');
})
.always(function(data) { // this will always fire even if the request fails
submitButton.removeAttr('disabled');
submitButton.text('Send');
});
});
});

<!-- simplified HTML -->
<form action="process_form.php" method="post" id="header-form">
<input type="email" name="email_subscription">
<input type="hidden" name="formtarget" value="header">
<button type="submit" name="submit_subscription">Submit (Header)</button>
<p id="header-form-responses"></p>
</form>
<form action="process_form.php" method="post" id="footer-form">
<input type="email" name="email_subscription">
<input type="hidden" name="formtarget" value="footer">
<button type="submit" name="submit_subscription">Submit (Footer)</button>
<p id="footer-form-responses"></p>
</form>