我正在制作一个Ajaxing表单。此表单是自定义页面模板。数据的保存工作正常,但当表单提交时,页面会重定向到websiteurl/wp-admin/admin-ajax.php
带有白色空白页。我想要的是防止重新加载页面。我没有收到来自的任何错误消息error function
.
如何修复此问题?
HTML
<form method="POST" action="<?php echo admin_url(\'admin-ajax.php\'); ?>" id="modal-form-ajax" autocomplete="off">
<input type="hidden" name="form_title" value="Resume"/>
<input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required data-selectable="true">
<input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required data-selectable="true">
<input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute(\'value\', this.value);" value="" required data-selectable="true">
<input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\\d{9}$" oninvalid="this.setCustomValidity(\'Please enter your 11-digits Philippine mobile number\')" onchange="try{ setCustomValidity(\'\') } catch(e){}" required data-selectable="true">
<div class="flex">
<label>Upload CV & Cover Letter</label>
<input placeholder="CV" type="file" name="Resume" value="" required>
</div>
<input type="hidden" name="action" value="validate_form_modal"/>
<?php wp_nonce_field(\'validate_form_modal_nonce\', \'name_of_nonce_field\'); ?>
<button id="submit-btn">Submit</button>
</form>
JS
(function($){
$("#modal-form-ajax").submit(function(e){
e.preventDefault();
var resumetest = $(\'input[name="form_title"]\').val();
var lastName = $(\'input[name="lastName"]\').val();
var firstName = $(\'input[name="firstName"]\').val();
var Email = $(\'input[name="Email"]\').val();
var contactNumber = $(\'input[name="contactNumber"]\').val();
var ajaxUrl = { ajaxFormUrl: \'//websiteurl/wp-admin/admin-ajax.php\' }
$.ajax({
type: \'post\',
dataType: "json",
url: ajaxUrl.ajaxFormUrl,
data: {
action: \'validate_form_modal\',
lastName: lastName,
firstName: firstName,
Email: Email,
contactNumber: contactNumber,
Resume: Resume
},
success: function(data){
console.log("Thank you for your application");
console.log($(\'#modal-form-ajax\').serialize());
$("#modal-form-ajax").fadeOut(\'ease\',function(){
$("#modal-form-ajax").html(\'<div id="modal-form-success"><div class="circle-loader"><div class="checkmark draw"></div></div><p>Thank you for your application</p><p>We\\\'ll get back to you shortly.</p></div>\');
$("#modal-form-ajax").fadeIn(\'ease\');
});
},
error: function(){
alert(response);
}
});
});
})(jQuery);
PHP (functions.php)
function ajax_modal_form_init(){
wp_localize_script(\'ajax-modal-form\', \'modalFormAjax\', array(\'ajaxurl\' => admin_url( \'admin-ajax.php\' )));
wp_enqueue_script(\'ajax-modal-form\');
}
add_action(\'wp_ajax_validate_form_modal\', \'validate_form_modal\');
add_action(\'wp_ajax_nopriv_validate_form_modal\', \'validate_form_modal\');
function validate_form_modal(){
ob_clean();
global $wpdb;
if(!isset($_POST[\'name_of_nonce_field\']) || ! wp_verify_nonce( $_POST[\'name_of_nonce_field\'], \'validate_form_modal_nonce\')){
exit(\'The form is not valid\');
}
$lastName = isset($_POST[\'lastName\']) ? filter_var($_POST[\'lastName\'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH) : \'\';
$firstName = isset($_POST[\'firstName\']) ? filter_var($_POST[\'firstName\'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH) : \'\';
$email = isset($_POST[\'Email\']) ? filter_var($_POST[\'Email\'], FILTER_VALIDATE_EMAIL) : \'\';
$contactNumber = isset($_POST[\'contactNumber\']) ? filter_var($_POST[\'contactNumber\'], FILTER_VALIDATE_REGEXP) : \'\';
echo do_shortcode("[cfdb-save-form-post]");
wp_die();
}