I have one form inside the other and I can not get the most internal form

Question

I have one form inside the other and I can not get the most internal form

Navigation

#1 by (4 votes)

0

Here is an example of how the form is, it is much more complex than that, it already has almost 10 years of use and I do not have time to modify everything. But I need to have access to the form that is inside the other, that is the form that is with the id = 'form2'.

<form action='pagina1.php' method='post' id='form1'>
    <input type='text' name='teste' value='teste'>
    <input type='submit' name='enviar' value='enviar'>

    <form action='pagina2.php' method='post' id='form2'>
       <input type='text' name='teste' value='teste'>
       <input type='submit' name='enviar' value='enviar'>
    </form>
</form>

Ways I've tried to access this form to submit it:

By clicking on the outermost subimit button it sends the form 1.

Creating a button on form2 with onclick and calling a javascript function passing as a parameter this.form it identifies form 1.

giving a document.ElementById ("form2"), it just does not find my form 2.

But when I give a document.ElementById ("form1") it returns form 1.

Does anyone know why this is happening and how to solve this problem?

javascript html html5 javascript-eventos

asked by anonymous 27.04.2017 / 14:32

1 answer

Retrieve struct data in C Error in the encryption program c #

score 4 · Accepted Answer

form elements can not be nested. In the W3C Recommendation , as Lucas posted in the comments, says:

Flow content, but with no form element descendants .

As a practical proof of this, just check in the browser inspector. Rotate the code:

<form action='pagina1.php' method='post' id='form1'>
  <input type='text' name='teste' value='teste'>
  <input type='submit' name='enviar' value='enviar'>

  <form action='pagina2.php' method='post' id='form2'>
    <input type='text' name='teste' value='teste'>
    <input type='submit' name='enviar' value='enviar'>
  </form>
</form>

Open the browser inspector ( F12 ) and review the code. You will see something like:

NotethatthesecondformwascompletelyignoredbythebrowserwhenloadingDOMelements,whichexplainsdocument.getElementById("form2") return null , since the element does not exist in the DOM, in fact.