Wordpress Fetch API Admin Ajax 400 Errors

When I submit my form to my wp-admin/admin-ajax.php I get a 400 error using fetch.

I have tried removing content type. Hard coding the Fetch URL

using FormData

        let formData = new FormData(form);

Using URLSearchParams

using them both const data = new URLSearchParams(new FormData(form));

I cant get it to work and am out of answers online so thought I'd ask here. Can you see an error in my code?

<form >
    <input type="text" name="fname">
    <input type="text" name="email">
    <input type="hidden" name="action" value="add_user_details_hook">
    <button type="submit">Submit</button>
  </form>

  <script>
    let form = document.forms[0];
    const data = new URLSearchParams(new FormData(form));
  
    form.addEventListener('submit', function(e){
      e.preventDefault();

      fetch('/wp-admin/admin-ajax.php', {
        method: 'post',
        body: data
      })

ADMIN-AJAX.php

function ajax_add_user_details_func(){
  var_dump('hey!');
}

add_action('wp_ajax_add_user_details_hook', 'ajax_add_user_details_func');
add_action('wp_ajax_nopriv_add_user_details_hook', 'ajax_add_user_details_func');

Edit I do believe it has something to do with empty FormData as even when I iterate over the object with forloop the fields are empty:

Example:

for (var [key, value] of formData.entries()) { 
  console.log(key, value);
}

Returns no values

Wordpress Fetch API Admin Ajax 400 Errors

0 Answers