Can you nest html forms?

Question

Is it possible to nest html forms like this

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

so that both forms work? My friend is having problems with this, a part of the subForm works, while another part of it does not.

Answer 1

Even if you could get it to work in one browser, there's no guarantee that it would work the same in all browsers. So while you might be able to get it to work some of the time, you certainly wouldn't be able to get it to work all of the time.

Answer 2

Plain html cannot allow you to do this. But with javascript you can be able to do that. If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Then in your javascript you could do this to serialize class1 elements

$(".class1").serialize();

For class2 you could do

$(".class2").serialize();

For the whole form

$("#formid").serialize();

or simply

$("#formid").submit();

Answer 3

You would even have problems making it work in different versions of the same browser. So avoid using that.

Answer 4

If you're using AngularJS, any <form> tags inside your ng-app are replaced at runtime with ngForm directives that are designed to be nested.

In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form> elements, so Angular provides the ngForm directive which behaves identically to <form> but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive. (source)

Answer 5

As Craig said, no.

But, regarding your comment as to why:

It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.

Answer 6

Another way to get around this problem, if you are using some server side scripting language that allows you to manipulate the posted data, is to declare your html form like this :

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

If you print the posted data (I will use PHP here), you will get an array like this :

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

Then you can just do something like :

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

Your $_POST now has only your "main form" data, and your subform data is stored in another variable you can manipulate at will.

Hope this helps!