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?

question from:https://stackoverflow.com/questions/1759006/embed-an-html-form-within-a-larger-form

Answer 1

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>