WordPress登录页面上的Ajax表单

Question

I have an issue on my code. I have created a form to allow user to ask for a "new account" to our customer services. The form ask informations and on click on the submit, send an email with ajax. Simply as that, but it is not working. My php file called with ajax request is not called (code not executed) like the ajax function didn't take the "URL" parameter. But ajax request return success.

So the problem is my email is not send.

If you can help me, many thanks in advance.

 function submit_new_account_form() { //AJAX envoi contact $("#form_new_account").submit(function(){ var name = $("#name").val(); var email = $("#email").val(); var ap21code = $("#ap21code").val(); var store = $("#store").val(); var Suburb = $("#Suburb").val(); var postcode = $("#postcode").val(); var contact_number = $("#contact_number").val(); var request; if( name !== "" && email !== "" && ap21code !== "" && store !== "" && Suburb !== "" && postcode !== "" && contact_number !== ""){ request = $.ajax({ url: "http://www.globebrandb2b.com/?page_id=39", method : "POST", data: { name : name, email : email, ap21code: ap21code, store: store, Suburb: Suburb, postcode: postcode, contact_number: contact_number } }); request.success(function() { $("#name").val(''); $("#email").val(''); $("#ap21code").val(''); $("#store").val(''); $("#Suburb").val(''); $("#postcode").val(''); $("#contact_number").val(''); $("#after_send").html("<p><div style=' opacity:1 !important; background-color: #ed1c24; color:white; max-height:70px; border: none;' id='success' class='alert alert-success' style='margin-bottom: 0px;'><p><i class='glyphicon glyphicon-alert' style='margin-right: 5px;'></i>Your request has been send.</p></div></p>"); $("#after_send").show(); $("#submit_new_account").attr('disabled','disabled'); setTimeout(function() { $("#form_new_account").hide(); $("#submit_new_account").removeAttr('disabled'); $("#after_send").hide(); }, 5000); }); request.fail(function() { $("#after_send").html('<p><div id="error" class="alert alert-info col-xs-12 col-sm-12 col-md-12 col-lg-12"><p><i class="glyphicon glyphicon-info-sign"></i>An error occured, please try later.</p></div></p>'); }); } return false; }); } 

 mail( 'Dylan.S@globebrand.com', 'TEST GLOBE EUROPE', 'TEST GLOBE MESSAGE'); 

 <form id="form_new_account" name="form_new_account" method="POST"> <table> <tr> <th class="padding"><label for="name" class="col-2 col-form-label">Name:</label></th> <td><input type="text" class="form-control" id="name" name="name" required></td> </tr> <tr> <th class="padding"><label for="email" class="col-2 col-form-label">Email Address:</label></th> <td><input type="text" class="form-control" id="email" name="email" required></td> </tr> <tr> <th class="padding"><label for="ap21code" class="col-2 col-form-label">AP21 Customer Account Code:<br><i>(on your statement)</i></label></th> <td><input type="text" class="form-control" id="ap21code" name="ap21code" required></td> </tr> <tr> <th class="padding"><label for="store" class="col-2 col-form-label">Store Name:</label></th> <td><input type="text" class="form-control" id="store" name="store" required></td> </tr> <tr> <th class="padding"><label for="Suburb" class="col-2 col-form-label">Suburb:</label></th> <td><input type="text" class="form-control" id="Suburb" name="Suburb" required></td> </tr> <tr> <th class="padding"><label for="postcode" class="col-2 col-form-label">PostCode:</label></th> <td><input type="text" class="form-control" id="postcode" name="postcode" required></td> </tr> <tr> <th class="padding"><label for="contact_number" class="col-2 col-form-label">Contact Number:</label></th> <td><input type="text" class="form-control" id="contact_number" name="contact_number" required></td> </tr> </table> <input id="submit_new_account" type="submit" name="submit_new_account" class="button" value="Submit" onclick="submit_new_account_form();"/> <p id="after_send"></p> </form> 

Answer 1

Back when starting WordPress development I read it was best to use WordPress's internal AJAX engine for requests. Since then that's how I've been doing it. It's a little bit of extra work but it seems relevant in a situation like this.

I do believe the URL is your issue. Someone can correct me if I'm wrong, but the URL http://www.globebrandb2b.com/?page_id=39 isn't going to post back to the same page (to run mail() with your form data) if that's what you're trying to accomplish.

To utilize the WordPress's internal AJAX, take a look a below...

In your functions.php , where you enqueue your scripts:

wp_enqueue_script('site', get_stylesheet_directory_uri() . '/js/site.js');

// In my projects I pass a small array of variables I want to use in my JS
// One of them is the url for the admin-ajax.php    
$params = array(
    'ajaxURL' => admin_url('admin-ajax.php')
);

// Localize scripts
wp_localize_script('site', 'jsData', $params);

IMPORTANT! wp_localize_script() MUST be called after the script has been registered using wp_register_script() or wp_enqueue_script().

What that will do is output a variable to your page like:

<script type='text/javascript'>
var jsData={"ajaxURL":"http:\/\/www.example.com\/wp-admin\/admin-ajax.php"};
</script>

Then you'll want to update your AJAX request to use the URL you provdied, and on top of that you'll want to tell it what function to run, in this case you'd create a new_account_mail() function in your functions.php.

request = $.ajax({
     url: jsData.ajaxURL, // <----- admin-ajax.php
     method : "POST",
     data: { action: 'new_account_mail', // <---- name of the function in your functions.php
             form: { name : name, // <---- form data
                     email : email, 
                     ap21code: ap21code, 
                     store: store, 
                     Suburb: Suburb, 
                     postcode: postcode, 
                     contact_number: contact_number 
                     }
      }
   });

Alright, so now in your functions.php , you'll create a function to handle that AJAX submission:

// Add action for `wp_ajax_nopriv_your function name` 
// and `wp_ajax_your function name` so that it works for authenticated 
// and unauthenticated users.
add_action( 'wp_ajax_nopriv_new_account_email', 'new_account_email' );
add_action( 'wp_ajax_new_account_email', 'new_account_email' );
function new_account_email(){

    // Now this function receives your $_POST data

   // Get the form data
   $form = [];
   parse_str($_POST['form'], $form); // parses query string into variables
    $name = $form['name'];
    $email = $form['email'];
    $ap21code = $form['ap21code'];
    // and so on....

    $data = [];

    // Send the mail
    // I like to use a 3rd party library like SwiftMailer
    // then do an if/else to determine if there were issues sending
    if(mail($email, 'TEST GLOBE EUROPE', 'TEST GLOBE MESSAGE')){
          $data['sent'] = 'The message was sent!';
    }else{
          $data['fail'] = 'The message was NOT sent!';
    }

    // In my project, I return a json object
    $response = json_encode($data);

    // Response output
    header( "Content-Type: application/json" );
    echo $response;

    // Stop execution
    wp_die();
}

Finally! Back to your AJAX:

// The request could come back without failing, but that doesn't 
// indicate the message was successfully sent
request.success(function(response){
    if(response.sent){
            // Message was sent
            // Maybe... :)
            // Even if the email was accepted for delivery, 
            // it doesn't mean it's actually sent and received
    }else{
            // Message was not sent
            // response.fail will have the fail message in it
    }
})
request.fail(function(error){
    // The request itself failed
});

There you have it! It's a bit of extra work but I've used this method many times.