Ok,
(btw ACF, I have takes 45 minutes-1 hour for writing my shit. I’m crying.)
So, I started by telling you that it was going to be a little hard for me to help you without knowing the structure of your field group.
For this reason, but also seeing that there is a lack of knowledge on your part, I preferred to show you how I would do it from A to Z.
Oh! I started by telling you a big sorry for my bad english too hehe.
So it start like this:
First of all, create your HTML structure without your PHP:
(I purposely used a different structure than yours to show other possible ways)
<form id="mySuperForm" action="" method="POST">
<input type="text" name="key" id="key">
<input type="text" name="value" id="value">
<button type="submit">
<span>Send</span>
</button>
</form>
Right after, manage your form with JavaScript like that (I am more concise than before. To do so, ACF really pissed me off.):
<form id="mySuperForm" action="" method="POST">
<input type="text" name="key" id="key">
<input type="text" name="value" id="value">
<button type="submit">
<span>Send</span>
</button>
</form>
<script>
const formElement = document.getElementById("mySuperForm");
if(!formElement) return;
/*
* Recup field
*/
const k = document.getElementById("key");
const v = document.getElementById("value");
/*
* Create a variable for prevent multiple submits
*/
let canSubmit = false;
formElement.addEventListener("submit", (e) => {
if(!canSubmit) return;
/*
* Prevent form to be automaticly submit on "Enter press" or button "Send" click
*/
e.preventDefault();
/*
* Do your field verifications here
*
* Add an error CSS class when a field is not good ...
*/
/*
* If error found, return
*/
if(formElement.querySelector(".error")) return;
canSubmit = false;
formElement.style.opacity = .6;
formElement.style.pointerEvents = "none";
/*
* If no error, send with fetch.
*
* The ajaxurl variable exist from the back-end. You need to create it if you when play with ajax from front-end
*/
const formData = new FormData();
formData.append("action", "save-something");
formData.append("key", k.value);
formData.append("value", v.value);
fetch(ajaxurl, {
post: "post",
body: formData
})
.then(resp => resp.json())
.then(data => {
canSubmit = true;
formElement.style.opacity = 1;
formElement.style.pointerEvents = "initial";
console.log(data);
});
});
</script>
Ok cool, you send your data in the air, but you want play with it, do some verifications and save your data if all is good. Go in your functions.php and add this code. (don’t forget change $post_id by yours or by “option” and do your verifications):
https://pastebin.com/P7CUpT1h
If you put a look to my code, you see some wp_ajax_{action} hook…. with my first text, I explain that to you, but right now, sorry, but I don’t want. (Fuck ACF…)
All done!
Don’t hesitate if you have some questions 💪
