Have to thank a guy on Stackoverflow for answering my question on this one.
https://stackoverflow.com/questions/79186303/how-to-parse-structured-input-tag-data-with-using-jquery-so-i-can-send-it-via/
Problem: You have form inputs. They might be in a form, or they might be in a div in case there are already form tags on the page.
Desired Result: Send the input data to the miva empressa back end via AJAX and be able to make sense of it.
Solution: Some creative JS to turn the data in a JS object and then into a JSON string and then use miva_json_decode(...) on the back end.
Example: Put some form inputs into a div and send the data as as JSON string to the back end.
<div id="myform">
<p>Your Name: <input type="text" name="openreviews_custom:name"></p>
<p>Your Email: <input type="text" name="openreviews_custom:email"></p>
<p>Your Website: <input type="text" name="openreviews_custom:website"></p>
<p>Your Review: <input type="text" name="openreviews_custom:review"></p>
<button type="button" id="send-data">Submit Review</button>
</div>
$('#send-data').click(function() {
const myObj = {};
const inputs = document.querySelectorAll('#openreviews-form input');
for (const i of inputs) {
myObj[i.name] = i.value;
}
const textareas = document.querySelectorAll('#openreviews-form textarea');
for (const i of textareas) {
myObj[i.name] = i.value;
}
const jsonData = JSON.stringify(myObj);
$.ajax({
url: '/ajax-page.html',
data: { jsondata: jsonData },
type: 'POST',
success: function (result) {
$('#ajax-result').html(result);
}
});
});
Note: The { jsondata: jsonData }
line will post the jsonData
constant to the back end via /ajax-page.html
as straight up easy to parse text JSON data .
Since we need to grab textarea data we also need to roll through textareas.
https://www.scotsscripts.com/mvblog/jquery-ajax-send-input-data-regardless-of-form-tag-and-input-names.html