There is the official documentation of the form handling with admin_post_{$action}

https://developer.wordpress.org/reference/hooks/admin_post_action/

But I don't know why there is none about admin_ajax_{$action} which I also couldn't find a really relevant and detailed explanation when I google.

I have the below code:

<form id="contact-form" method="post">
   <input type="hidden" name="action" value="form_handling">
   <input id="fname" placeholder="First Name" type="text" name="fname">
   <input id="lname" placeholder="Last Name" type="text" name="lname">
   <input id="email" placeholder="Email Address" type="email" name="email">
   <input id="phone" placeholder="Phone Number" type="tel" name="phone">
   <textarea id="message" placeholder="Your Message..." name="message" rows="3"></textarea>
   <input id="submit-form" type="submit" value="Submit"> 
</form>

With this in the functions.php:

function form_handling() {
   $first_name = sanitize_text_field( $_POST['fname'] );
   $last_name = sanitize_text_field( $_POST['lname'] );
   $email = sanitize_email( $_POST['email'] );
   $phone = sanitize_text_field( $_POST['phone'] );
   $message = sanitize_textarea_field( $_POST['message'] );
   $mail = '[email protected]';
   $subject = 'New Submission';
   $data = $first_name . ' ' . $last_name . ' ' . $email . ' ' . $phone . ' ' . $message;
   $headers = 'From: Company <[email protected]>';

   wp_mail( $mail, $subject, $data, $headers );

   wp_die();
}

wp_enqueue_script(
   'example',
   'https://local.test/script.js',
   array(),
   null,
   true
);

And JavaScript that uses fetch():

const contactForm = document.querySelector('#contact-form'),
   btnSubmit = document.querySelector('#submit-form'),
   ajaxData = new FormData(contactForm);

btnSubmit.addEventListener('click', function(e) {
   e.preventDefault();

   fetch('https://local.test/wp-admin/admin-ajax.php', {
      method: 'POST',
      body: ajaxData
   }).then( res => res.text() )
   .then( data => {
      console.log( data );
   }).catch( err => {
      console.log(err);
   });
})

But it now returns <empty string> in the console.

CodePudding user response：

Form

<form id="contact-form">
   <input id="fname" placeholder="First Name" type="text" name="fname">
   <input id="lname" placeholder="Last Name" type="text" name="lname">
   <input id="email" placeholder="Email Address" type="email" name="email">
   <input id="phone" placeholder="Phone Number" type="tel" name="phone">
   <textarea id="message" placeholder="Your Message..." name="message" rows="3"></textarea>
   <input id="submit-form" type="submit" value="Submit"> 
</form>

<script>
 const wp_ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

below is wordpress ajax using fetch:

functions.php or plugin file

function form_handling() {
  
  echo "inside Ajax func form_handling";

   $first_name = sanitize_text_field( $_POST['fname'] );
   $last_name = sanitize_text_field( $_POST['lname'] );
   $email = sanitize_email( $_POST['email'] );
   $phone = sanitize_text_field( $_POST['phone'] );
   $message = sanitize_textarea_field( $_POST['message'] );
   $mail = '[email protected]';
   $subject = 'New Submission';
   $data = $first_name . ' ' . $last_name . ' ' . $email . ' ' . $phone . ' ' . $message;
   $headers = 'From: Company <[email protected]>';

   wp_mail( $mail, $subject, $data, $headers );

   wp_die();
}

add_action( 'wp_ajax_form_handling', 'form_handling' );

wp_enqueue_script(
   'example',
   'https://local.test/script.js',
   array(),
   null,
   true
);

javascript

const contactForm = document.querySelector('#contact-form'),
   btnSubmit = document.querySelector('#submit-form'),
   ajaxData = new FormData(contactForm);

ajaxData.append( 'action', 'form_handling' );
ajaxData.append( 'test', 'okk' );

btnSubmit.addEventListener('click', function(e) {
   e.preventDefault();

   fetch(wp_ajaxurl, {
      method: 'POST',
      body: ajaxData
   }).then( res => res.text() )
   .then( data => {

      console.log("Ajax response: ");
      console.log( data );

   }).catch( err => {
      console.log(err);
   });
})

if you have any doubts let me know...