Nested HTML form unavailable - multiple forms problem

Question

Here is the scenario, I have 3 html forms per page and they look like

form1 () form2 (form3 ())

dummy program to test three forms __

<script language="javascript" type="text/javascript"> function submitthisform(no){ document.forms[no].submit; } </script> <form action="http://cnn.com" name="1"> <input type=submit value="cnn" onclick="submitthisform('1')" name='submit1'> </form> <form action="http://google.com" name="2"> <form action="http://yahoo.com" name="3"> <input type=submit value="yahoo" onclick="submitthisform('3')" name="submit3"> </form> <input type=submit value="google" onclick="submitthisform('2')" name="submit2"> </form> 

---

now when I do submit3, the onclick function is called, where I try to submit form3, because otherwise it always presents form 2

in onclick, I submit the form name. But form 3 seems unavailable. The reason is that if I cross all the forms on the page, it does not return form 3, but only form 1 and 2

 var forms = document.getElementsByTagName("form"); for (var i=0; i<forms.length; i++){ alert('form'+i+' = '+forms[i].name);// displays name of form1&2 } 

it also gives javascript err on click submit2.

try this little code and you get this idea. tell me can i file form 3 !!!!

Answer 1

According to the XHTML specification

the form must not contain other form elements.

Therefore, please do not do this, as you cannot guarantee compatibility between browsers (current or future)

Answer 2

My solution: deactivate the parent form by moving all children to a new div. In fact, I am changing the type of the form element to a div.

Here is my tyken code snippet from Vue.js method:

 let target = document.createElement('div'); let source = document.getElementById(this.parentFormId); // change this! source.parentNode.insertBefore(target,source); source.childNodes.forEach(node => { node.parentNode.removeChild(node); target.appendChild(node);}); source.parentNode.removeChild(source); target.id = this.parentFormId; 

Nested form markup is inserted dynamically through a computed property to avoid conflicts. Optionally, if the external form needs to be restored, the attributes of the form can also be copied. For my purpose this is not necessary.

Maybe hack, but it works well!