JQUERY AJAX: Send Input Data Regardless of Form Tag and Input Names

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.