0

I'm trying to Ajaxifying my form. Everything works fine, except the 2 things, 1) the alert triggered multiple times, 2) if I removed the alert, the ajax won't work instead after submitting the form it directs to urldomain/wp-admin/admin-ajax.php and it will displayed 0.

UPDATE: I found some error enter image description here

How to fix this?

HTML

<form method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>" id="modal-form-ajax" autocomplete="off">
        <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">
        <button id="modal-btn">Submit</button>
</form>

JS

jQuery(document).ready(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();
        alert (lastName);
        var ajaxUrl = { ajaxFormUrl: '//urldomain/wp-admin/admin-ajax.php' }

          $.ajax({
            url: ajaxUrl,
            method: "POST",
            data: {
                lastName: lastName,
                firstName: firstName, 
                Email: Email,
                contactNumber: contactNumber,
                action: 'validate_form'
            },
            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('<p>We\'ll get back to you shortly.</p>');
                  $("#modal-form-ajax").fadeIn('ease');
                });
              },
            error: function(){
                console.log("Form submission was unsuccessful");
              }
          });
     });
});

PHP (functions.php)

add_action('wp_ajax_validate_form', 'validate_form');
add_action('wp_ajax_nopriv_validate_form', 'validate_form');
function validate_form(){
    ob_clean();
    global $wpdb;
    $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();
}
12
  • What happens if you set the forms action attribute to # - no need to set an url here because you submit by using javascript.
    – Luckyfella
    Jan 29 '18 at 12:02
  • Is your WordPress install in a subdirectory? Like example.com/wordpress, or something like that? Jan 29 '18 at 12:05
  • Add the code you use to register/enqueue/localize your JS please.
    – jdm2112
    Jan 29 '18 at 16:22
  • When alert changes the functionality of your code substantially, I've found it's often a timing issue where the alert is basically "pausing" your code, giving other code the chance to do something necessary for your code's completion. Look at your browser's developer tools, note any errors, and also look at the network tab, the ajax requests and their initiators to see where they got fired from.
    – janh
    Jan 29 '18 at 18:01
  • @JacobPeattie, the WordPress is not installed in a subdirectory
    – indigo
    Jan 30 '18 at 2:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.