Embed an HTML <form> within a larger <form>?

Question

I want to have an HTML form embedded in another form like so:

<form id="form1">
  <input name="val1"/>
  <form id="form2">
    <input name="val2"/>
    <input type="button" name="Submit Form 2 ONLY">
  </form>
<input type="button" name="Submit Form 1 data including form 2">
</form>

I need to submit the entirety of form1, but when I submit form2 I only want to submit the data in form2 (not everything in form1.) Will this work?

Answer 1

You cannot have nested forms (source) so this will not work.

Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested

Answer 2

It's not valid and will in my experience produce arbitrary results.

You could work around this using Javascript's DOM functions, taking form2 out of form1, putting it into the body, submitting it and putting it back into form1.

Edit: This won't be 100% right either, as it still has nested forms. As some of the answers point out, you have to have two separate forms. You can still do this using DOM magic but with a few more turns - .see Randolpho's answer.

Answer 3

I think there may be issues with the UI for this. It'd be very confusing for a user if only part of (what appears to be) a single form was submitted/saved.

Rather than nesting forms, which, as stated, is invalid, I think you need to look at perhaps implementing some AJAX calls instead to update subset of data.

Answer 4

What you have described will not work.

One workaround would be to create two forms that are not nested. You would use hidden inputs for your original parent form that duplicate the inputs from your original nested form. Then use Javascript/DOM manipulation to hook the submit event on your "parent" form, copying the values from the "nested" form into the hidden inputs in the "parent" form before allowing the form to submit.

Your form structure would look something like this (ignoring layout HTML):

<form id="form1">
  <input name="val1"/>
  <input name="val2" type="hidden" />
  <input type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">
</form>
<form id="form2">
  <input name="val2"/>
  <input type="button" name="Submit Form 2 ONLY">
</form>

Answer 5

A possible solution : Instead of having the nested form, add an onClick event to the form2 button which will call a JS method that could get your specific items (val2 input in this case) from form1 and using AJAX or simply xmlHTTPRequests() to perform the desired POST methods.

Answer 6

As other people have said, you cannot nest form elements. The way I would handle something like this would be to use a single form and then group the elements with fieldsets. You can then add events to the submit buttons with javascript and enable/disable the input fields that should be submitted.

With jQuery, MooTools or any other framework this would be very simple. It will break if the client disables scripts, though.

A MooTools solution could look like this:

$('submit2').addEvent('click', function (e) {
    e.stop();
    $$('#fieldset1 input').set('disabled', 'disabled');
    $('form').submit();
    $$('#fieldset2 input').set('disabled', '');
}

Oh, and I trust you have a good reason for doing this, because to me it sounds suspiciously like bad usability :-)