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

Asked

Viewed 645 times

2

Here’s an example of how the form is, it’s much more complex than that, it’s almost 10 years old and I don’t have time to modify everything. But I need to have access to the form inside the other, ie the form with 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 have tried to access this form to send it:

  1. By clicking the most external subimit button it send the form 1.
  2. Creating a button in form2 with onclick and calling a javascript function passing as parameter an this.form it identifies the form 1.
  3. giving a Document.Elementbyid("form2"), it simply does not find my form 2.
  4. But when I give a Document.Elementbyid("Form1") it returns the form 1.

someone knows why this is happening and how to solve this problem ?

javascript html html5 javascript-events

  • some specific reason to put one form inside the other?

  • 1

    There are syntax errors in your code: 'name='enviar', there is a character ' before the attribute name that compromises the rest of the code. Fix this. Highlighting the previous comment: it is not very logical to create a form within another (in my view).

  • No, as I said it has 10 years of use, and at the time I did not work here, now why do so do not know the need, for the vision I have here would not need...

  • 1

    then Oce already has his answer man... separates these two forrms..

  • 1

    No, you can’t have forms nested

  • I separated the two forms, I put one below the other there it worked. Thank you guys very much !

Show 1 more comment

1 answer

5


Elements form cannot be nested. In the recommendation W3C, as Lucas posted in the comments, says:

Flow content, but with in the form element.

As practical proof of this, just check in the browser inspector. Run 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 analyze the code. You’ll see something like:

Código HTML no inspetor do navegador

Note that the second form was completely ignored by the browser when loading the DOM elements, which explains document.getElementById("form2") return null, because the element does not exist in the GIFT, in fact.

Browser other questions tagged javascript html html5 javascript-events

You are not signed in. Login or sign up in order to post.