Submit Form Using AJAX In WordPress

wp-ajax

Using AJAX has long been a great way dealing with real-time updates, including, but not limited to – submitting forms without refreshing page. Shortly, AJAX allows you to make asynchronous HTTP requests to a webserver once a web page is already loaded. AJAX stands for Asynchronous JavaScript and XML. It uses JavaScript to send asynchronous request and handle the response from the server. So in this tutorial we are going to learn how to submit form using AJAX in WordPress.

Create Form For Sending Data With AJAX

First of all, let’s create a basic form, which will POST data asynchronously to the server. Good thing is, that WordPress already has simple way of handling AJAX requests. If you used AJAX in the past, then this will be a breeze for you. But that will discussed a little bit later. Now back to creating a form compatible for AJAX request in WordPress:

As you see, in order to work with WordPress built-in AJAX handling core functionality, we need form to send data to specific URL, generated by admin_url(‘admin-ajax.php’) function, which basically generates an absolute path to admin-ajax.php file on your WordPress installation. Also, we included an hidden input with action name,  where the value will a part of the action hook name that will handle the request, as You will se later on.

jQuery Part

Now then, let’s create a js file, where we will specify ajax functionality:

If you have been using AJAX previously, then this will be clear to you, otherwise, refer to this link for explanation.

Setup WordPress Function For Handling AJAX Request

Now the most important part is to create a function that will actually handle and process AJAX request. To do that, let’s head to functions.php file, and add it:

We created a function which will handle the request, and hooked it to a specific action. The action is formed from two parts: wp_ajax_/wp_ajax_noprov_ custom_action (notice, this is the value specified in form’s hidden input in our form:

 You may ask, why we use wp_ajax_ and wp_ajax_nopriv_, and what is the difference between these two? wp_ajax_ is used for handling requests from authenticated users, whereas wp_ajax_nopriv_ is for non-authenticated users. So if You don’t have requirements from which type of users allow to send AJAX request, then it is a good idea to use these two actions at the same time.

Keep in mind, that WordPress AJAX action can return one of these values: 0 or -1.

is returned if the requested action is not created, and -1 is returned if /admin-ajax.php file is accessed directly in URL.

Further Enhancing Security With Nonce

It is a good idea to use special WordPress security functionality called nonce. WordPress nonce is used for security purposes, preventing from attacks like CSRF (Cross-site request forgery). It is basically a unique to the current request generated token, which is used for sending along with other data in the form. It is then verified in the server-side, when processing the request with submitted data, including the token. In the server-side, it is already known excactly what token is expected to be from the coming request, so if token will be missing, or modified, application will throw an exception.

To use nonce in our previous created form, we can do this:

For more information on wp_nonce_field function, refer to this link.

Then, our server-side verification would look like this:

That’s it. You learned how to use AJAX to submit forms in WordPress. Now with the power of JavaScript, You can modify form to add success message on successful form submit, or otherwise an error message on failed submition, or anything else.

Comments

  • Mamta says:

    Hi…
    Thanks for nice article….but it always return 0 in data.

  • Mamta says:

    Please give reason and solution for this…Thanks in advance.

    • Regularcoder says:

      Hi Mamta,

      Sorry for late response. As I wrote in article, 0 is returned if the requested action is not created, so it’s most likely that you have mispelled the value of hidden input with name “action”, as in the first code example. The value of this input need to be exact as the name of function, that will handle the ajax request.

      Hope this helps. Let me know if you need more help.

  • Mark says:

    Hi @regularcoder,
    What’s the advantage of using action=""
    over wp_localize_script( 'my-ajax-handle', 'wp_ajax_script', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

    Thanks.

  • Mark says:

    Hello again @regularcoder,

    When I submit a form (contact form) I’m taken to admin-ajax.php where the nonce message is “The form is not valid” (as per the error message).

    I don’t see anything in the js that relates to displaying the result on the page that contains the form without refreshing.

    Thanks.

  • Nilang says:

    Not working for me.

    it always return 0 in data.

  • Great post ! Insightful and very helpful. I agree with what you wisely pointed out there should be a balance of what your audience wants and what you want them to see. I guess there is need to always implement actionable changes that will bring better results. Thanks for sharing this value-packed post

  • Many Thanks for this great tutorial.

  • Ketan Chaudhari says:

    I have copy all code as you given. but problem is that

    1) Page go to ” http://localhost/wp/wp-admin/admin-ajax.php
    2) Give output ” 0 “

    • Ali Zafar says:

      if (trim($_POST[’email’]) == ”) {
      $response[‘status’] = false;
      $response[‘message’] = ‘Email is required’;
      }else{
      $response[‘status’] = true;
      $response[‘message’] = ‘success’;
      }
      echo json_encode($response);
      exit();

  • Joey says:

    Please use

    wp_send_json($response);

    instead of

    exit(json_encode($response));

  • Angel Utset says:

    Hi. I followed exactly your tutorial. Thanks a lot
    However, after submitting the browser opens
    ../wp-admin/admin-ajax.php
    with
    “{\”error\”:false}”
    it should come to the success function instead. What do I have wrong?

Leave a Reply

Your email address will not be published.

*
*