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>

JQUERY:

$('#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.

Vanilla JS: No reason to use JQUERY, here's a vanilla JS

document.getElementById('send-data').addEventListener('click', () => {
	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);
	fetch('/ajax-page.html', {
		method: 'POST',
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		body: new URLSearchParams({ jsondata: jsonData })
	})
	.then(response => response.text())
	.then(result => {
		document.getElementById('ajax-result').innerHTML = result;
	});
});