CODEWITHSUNDEEP
javascripthtmlformssubmit
sb.
sb.

Reputation: 1

nested html FORM is inaccessible - multiple forms problem

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

Upvotes: 0

Views: 2054

Answers (2)

Wulf
Wulf

Reputation: 1

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!

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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)

Upvotes: 4

Related Questions