nested html FORM is inaccessible - multiple forms problem

Question

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

form1() form2(form3())

a dummy program to test out the 3 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 gets called, where I try to submit the form3 because otherwise it always submits the form 2

in onclick, I send the form name. But form3 seems to be inaccessible. Reason is, if i traverse all the forms on the page, it doesnt return form 3 but only form 1 & 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 small code and u will get the idea. tell me if i can submit form 3!!!!

can you post a little more of your code? These snippets aren't terribly informative. — Joel Etherton
– Joel Etherton, Commented Jan 29, 2010 at 2:58

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

According to XHTML specs

form must not contain other form elements.

So please do not do this as you can not guarantee compatibility across browsers (current or future)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 29, 2010 at 3:15

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wulf · Accepted Answer · 2018-04-12 11:42:10Z

My solution: deactivate the parent form by moving all children into a new div. In fact, I change the form element´s type to div.

Here my code snippet tyken from a 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;

The nested form markup ist pasted in dynamically via computed property to avoid conflicts. Optionally, if the outer form needs to be restored, the form-attributes can by copied too. For my purpose, this is not necessary.

Maybe a hack, but it works well!

Collectives™ on Stack Overflow

nested html FORM is inaccessible - multiple forms problem

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related