Capture form - Correct way

Question

Capture form - Correct way

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I used to call a specific form by creation ID in the body of the document:

document.forms[0]

Only after I was able to understand what the NAME attribute is in these cases, but I was in doubt, for example, I have more than one form on the page, it can be a login or registration and another search, so I assign the corresponding name to each one, and I want to use the login form to validate by Javascript:

<form name="login">
<input type="text" value="" name="user" required />
<input type="password" value="" name="user" required />
<input type="button" onclick="validateLogin()" />
</form>

But I do not even know the right way to do this, both work in Firefox, Chrome and Opera:

1 °:

document.forms['login']

2 °:

document.forms.login

So I usually do this:

var form = document.forms['login'] || document.forms.login

And I do not even know if this works, but I'll be careful if any browser does not work.

So, what would be the best or most correct way to work on any browser on any platform?

javascript html dom

asked by anonymous 27.02.2018 / 22:51

3 answers

Tom cat - Configure X-FRAME-OPTIONS Error Functions Wordpress - Parse error: syntax error, unexpected

score 0 · Answer 1

Both work, both are correct (the way to use) and both return HTMLCollection .

This return value is an interface similar to an array , you can use collection[0] or collection.getItem(0) and object , you can use collection.form_name .

The advantage of using the form name is that you will not have to worry about dynamic form, since the index of these forms, however, vary widely.

You can also use it in the following way (all of them are capturing the same value).

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

Example:

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

console.log( form1 == form2 && form3 == form4 );

console.log( form1.elements.user );
console.log( form2.elements.user );
console.log( form3.elements.user );
console.log( form4.elements.user );

<form name="login">
  <input type="text" name="user" value="Your user" />
  <input type="password" name="pass" value="Your pass" />
</form>

score 0 · Answer 2

Well I particularly prefer to use Jquery for being "easier" and more "visually clean" but as you are using pure javascript here it goes

<form name="login">
    <input type="text" value="" name="user" required />
    <input type="password" value="" name="senha" required />
    <input type="button" onclick="validateLogin()" />
</form>

<script>
    var form = document.getElementsByName("login");
    var campoUsuario = form.getElementsByName("user");
    var senha = form.getElementsByName("senha");
</script>

There are other ways to get the element by ID, Class, Tipó

document.getElementById("algumid");
document.getElementsByClassName("algumaclass");
document.getElementsByTagName("div");

score 0 · Answer 3

I think there is no most correct way , there is most efficient and practical way . If you just want to submit a form, you can omit the form name and send it through this to onsubmit , which makes the process simpler.

For example:

function valida(i){

   if(!i.nome.value){
      alert("Informe o nome");
      return false;
   }

   if(!i.email.value){
      alert("Informe o email");
      return false;
   }
   
}

<form action="destino.php" method="post" onsubmit="return valida(this)">
      <h2>Cadastro</h2>
      <input type="text" name="nome" placeholder="Nome" />
      <br>
      <input type="text" name="email" placeholder="Email" />
    <button type="submit">Enviar</button>
</form>

The i parameter of the valida(i) function is already the form. So just enough you get the values of inputs ( i.nome.value , i.email.value etc).

If you have another form, it's the same thing. The this will send the submitted form values. This way you do not worry about "what form to capture" because this already does it for you.