Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

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

Scot Ranney • November 14, 2024


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

mvkb_json mvkb_ajax mvkb_jquery