0

Preciso retorna o id de uma formulário Html, até ai tudo bem eu sei a função, porém a questão é quando o formulário tem um imput com name='id', ao inves de retornar o id do formulário a mesma função retorna o imput. Preciso mesmo é do ID do formulário só. *Obs nao posso remover o imput name='id', isso funciona porém preciso dessa informação.

function enviar(evento, form){
  evento.preventDefault();
  
  // cosole log retorna name="id", preciso do id do Fomulario == idFormulario1 / idFormulario2 --///
  console.log(form.id); 
  
  const formularioID = form.id;
  const formularioCompleto = document.querySelector('#'+formularioID);
  const div = document.querySelector('#mostrarID');
  
  console.log(form);
  div.innerHTML = formularioID;
}
<form action="./" method="post" id="idFormulario1" onsubmit="enviar(event,this)" >
<!-- Preciso dessa informação name=id, porém isso está atrapalhado !-->
<input type="hidden" name="id" value="777">

<input type="text" name="teste" id="teste" placeholder="da Erro">
<button type="submit">Descrobri ID Formulario 1 </button>
</form>


<br>
<hr>

<form action="./" method="post" id="idFormulario2" onsubmit="enviar(event,this)" >
<!-- Removendo name='id' funciona
<input type="hidden" name="id" value="777">
!-->

<input type="text" name="teste" id="teste" placeholder="Correto">
<button type="submit" >Descrobri ID Formulario 2 </button>
</form>


<br>
<br>
<div id='mostrarID'> </div>

2
  • 1
    Realmente vai ocorrer este comportamento Kleuton pq quando tem um elemento Html com o atributo name aquele elemento no caso aí um input vai ser reconhecido no documento exatamente com esse nome de id, aí quando faz form.id seria o mesmo que fazer form >> input, por isso o erro!
    – utente
    28/10/2022 às 19:12
  • é realmente viz uma fasta pesquisa aqui, mas a unica solução foi mudar o input name=id, para outro nome, tipo name='id-qualquercoisa' ... valeu 28/10/2022 às 19:22

1 Resposta 1

1

Então, como comentei o que ocorre é que atribuindo o valor id ao atributo name o elemento que possui este atributo ficará reconhecido no documento HTML com esse nome e quando faz form.id na função ocorre o erro, pq é buscado o elemento com exatamente esse nome e não o id do formulário em si. O que pode fazer é como no exemplo abaixo, acessando o elemento acima/pai com a propriedade parentNode e pegando o valor do atributo id deste elemento no caso aí o form através do método getAttribute():

function enviar(evento, form) {
  evento.preventDefault();

  const formularioID = form.id.parentNode.getAttribute('id');
  const div = document.querySelector('#mostrarID');

  div.innerHTML = formularioID;
}
<form action="./" method="post" id="idFormulario1" onsubmit="enviar(event, this)">
  <input type="hidden" name="id" value="777">

  <input type="text" name="teste" id="teste" placeholder="UM">
  <button type="submit">Descrobri ID Formulario 1 </button>
</form>

<br>
<hr>

<form action="./" method="post" id="idFormulario2" onsubmit="enviar(event, this)">
  <input type="hidden" name="id" value="888">


  <input type="text" name="teste" id="teste" placeholder="DOIS">
  <button type="submit">Descrobri ID Formulario 2 </button>
</form>

<br>
<br>
<div id='mostrarID'> </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .