JSFiddle - React, Tailwind, and code Playground
HTML
<input name="menu[1][title]" value="Index" />
<input name="menu[1][subtitle]" value="Our home page" />
<input name="menu[1][crumb]" value="Home" />
<input name="menu[2][title]" value="Contact" />
<input name="menu[2][subtitle]" value="Get in touch" />
<input name="menu[3][crumb]" value="Contact" />
<button id="mySubmitButton">Go !</button>
JavaScript
$( function() {
// We bind the click on the submit button
$('#mySubmitButton').on('click', onSubmit);
function onSubmit(e) {
e.preventDefault();
var $inputs = $('input'),
myArray = [],
regExp = /\[(.*)\]\[(.*)\]/;
// We build the array
$inputs.each( function() {
var $this = $(this),
val = $this.val(),
name = $this.attr('name').match( regExp ),
id = name[1],
type = name[2];
myArray[id] = ( myArray[id] === undefined ) ? [] : myArray[id];
myArray[id].push({
"type": type,
"val": val
});
});
// Look at your console and see what your array looks like
console.log( myArray );
// We send the ajax request to your PHP script
// Within your PHP, you just have to parse the $_POST['myJSONString']
// and you'll get a easy-to-use array
$.ajax({
type: "POST",
url: "some.php",
data: { "myJSONString": JSON.stringify( myArray ) }
}).done(myCallbackFunction);
}
function myCallbackFunction( msg ) {
// Do whatever callback you need when the ajax request has been successful
alert( "Data Saved: " + msg );
}
});