So many times I’ve built software with a single form, and plenty of AJAX buttons perform other key functions.  This can be done by adding buttons which perform a task different to the main form, and posting using AJAX to perform the data changes.

It works well.  But it does require a bit of extra work to advise the user that yes, they did actually click on the button and yes, the website is actually working.  Disabling the button, showing an in-progress indicator – there are many choices here.

The number of times I’ve thought – wouldn’t it be great if we could just setup a nested form and perform a nice easy submit that does the job.

Well – now you can.  Thanks to the wonder of HTML5.  And it’s so much easier than you’d think.

Let’s say we’ve got this setup:
<form method=”post” action=”/action/save”>
<input id=”id” name=”id” value=”someid” />
<input type=”submit” value=”Save” />
<input type=”submit” value=”Delete” />
One form – a save button and a delete button.  The setup above causes some problems, because two submit buttons means both will submit the absolute-parent form (/action/save).  We can add further parameters in on the button to see which was called, but really – why?

Especially when you can do this using HTML5:
<form method=”post” action=”/action/save” id=”save-form”>
<input id=”id” name=”id” value=”someid” />
<input type=”submit” value=”Save” form=”save-form” />
<input type=”submit” value=”Delete”  form=”delete-form” />
 <form method=”post” action=”/action/delete” id=”delete-form”>
<input id=”id” name=”id” value=”someid” />
So easy – add a “form” attribute to the submit buttons in the parent form.  Then – outside the parent form, setup a small form with just the controls required to post to the action.  Wire up the “form” attribute to the ID of the relevant form, and bingo – you’ve now got multiple submit buttons posting correctly to the relevant […]