Fetch + Axios 400 Errors WP

Basic Form

`<form id=”theform”>`
`<input type=”text” name=”fname”>`
`<input id=”email” type=”text” name=”email”>`
`<input type=”hidden” name=”action” value=”add_user_details_hook”>`
`<button type=”submit”>Submit</button>`
`</form>`

Get form Data and submit on submit.

let form = document.forms[0];
const data = new URLSearchParams(new FormData(form));
const OtherData = new FormData(form);
form.addEventListener(‘submit’, function(e){
e.preventDefault();
fetch(‘/wp-admin/admin-ajax.php’, {
method: ‘post’,
body: data
})

My formData is empty.
using formData or OtherData as in example \^\^
I have even used iteration over it to see the keys as others suggested:

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

Returns no values.

Pulling my hair out with this one any ideas?!

1 Comment
  1. I remember also tearing my hair out over this same FormData issue with WP AJAX and fetch. I resolved it by just using jQuery. It may seem backward or archaic but it just works.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer