From Wordpress form submit on-click event, how to call an external REST POST API?

admin管理员组

文章数量:1126116

I am new to UI. I have created a REST API and a form in my Wordpress website. Could you please suggest how to make POST call to my REST endpoint on-click event of the form submit button?

1. How to open /wp-admin/admin-ajax.php in IDE? I am hosting the website in Godaddy.
2. How to get the value of each field of the form?
3. How to make POST call to my REST endpoint on-click event and get the POST API response?

Thank you for your help! Nav

I am new to UI. I have created a REST API and a form in my Wordpress website. Could you please suggest how to make POST call to my REST endpoint on-click event of the form submit button?

1. How to open /wp-admin/admin-ajax.php in IDE? I am hosting the website in Godaddy.
2. How to get the value of each field of the form?
3. How to make POST call to my REST endpoint on-click event and get the POST API response?

Thank you for your help! Nav

• forms

Share Improve this question asked Feb 11, 2024 at 20:17 NavNav 111 bronze badge 1

• With the help of AJAX. – Aftab Commented Feb 12, 2024 at 4:00

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

1. You donot need to edit or modify the wp-admin/admin-ajax.php as this is wp core file. If you want to use ajax you can check here

2. For getting the values of form you can use serialize() function of jQuery.

3. Please check the below code for calling REST API on click event.

    $('button').click(function(){
    $.ajax({
         type : "POST",
         dataType : "JSON",
         url : "/wp-json/v2/......",
         data : $(form#formID).serialize(),
         success: function(response) {
            alert(response);
         }
    }); 
   

   });

HTML :

<div id="border">
  <form  action="/" id="registerSubmit">
    <div id="userError"></div>
      Username: <input type="text" name="username" id="username" size="10"/><br>
      <div id="emailError" ></div>
      Email: <input type="text" name="email" size="10" id="email"/><br>
      <div id="passError" ></div>
      Password: <input type="password" name="password" size="10" id="password"/><br>
      <div id="passConfError" ></div>
      Confirm Password: <input type="password" name="passconf" size="10" id="passconf"/><br>
      <input type="submit" name="submit" value="Register" />
  </form>
</div>

jQuery:

    $('form').on('submit', function(e) {
      e.preventDefault();
      var form_data = $("#registerSubmit").serialize() // returns all the data in your form
     $.ajax({
         type: "POST",
         url : "/wp-admin/admin-ajax.php",
         data: {action: "save_form_data" , "data": form_data},
         success: function() {
              //success message mybe...
         }
     });
   });

PHP :

add_action( 'wp_ajax_nopriv_save_form_data', 'my_ajax_save_form_data' );
add_action( 'wp_ajax_save_form_data', 'my_ajax_save_form_data' );

function my_ajax_save_form_data() {
    $form_data = $_POST['data']; 
  /* here you can use CURL for post data to other your rest API */
}

本文标签： From Wordpress form submit onclick eventhow to call an external REST POST API