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!!!!

Answer 1

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)