Compare "input" element values with javascript or jQuery

Asked

Viewed 5,377 times

1

Guys, I tried to make this fiddle to understand how to compare conditions of elements with javascript, but I don’t know what went wrong.

var username = "admin";
var password = "admin";


function validarUsuarioSenha() {

  if ($("#usuario").value() == username && $("#senha").value() == password) {

    $("#loginCorreto").show();
  } else {

    $("#loginErrado").show();
  }

}
#loginCorreto {
  width: 235px;
  height: 20px;
  background: green;
  color: #FFFFFF;
  display: none;
}
#loginErrado {
  width: 235px;
  height: 20px;
  background: red;
  color: #FFFFFF;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="usuario" type="text" placeholder="Digite seu login: " />
<br/>
<br/>
<input id="senha" type="password" placeholder="Digite sua senha: " />
<br/>
<br/>
<input type="button" value="Fazer login" onclick="validarUsuarioSenha()" />
<br/>
<br/>
<div id="loginCorreto">Login efetuado com sucesso!</div>
<div id="loginErrado">Usuário ou senha inválidos!</div>

jquery

2 answers

2


Utilize $("elemento").val() nay .value():

var username = "admin";
var password = "admin";


function validarUsuarioSenha() {

  if ($("#usuario").val() == username && $("#senha").val() == password) {

    $("#loginCorreto").show();
    $("#loginErrado").hide();
  } else {
    $("#loginErrado").show();
    $("#loginCorreto").hide();
  }

}
#loginCorreto {
  width: 235px;
  height: 20px;
  background: green;
  color: #FFFFFF;
  display: none;
}
#loginErrado {
  width: 235px;
  height: 20px;
  background: red;
  color: #FFFFFF;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="usuario" type="text" placeholder="Digite seu login: " />
<br/>
<br/>
<input id="senha" type="password" placeholder="Digite sua senha: " />
<br/>
<br/>
<input type="button" value="Fazer login" onclick="validarUsuarioSenha()" />
<br/>
<br/>
<div id="loginCorreto">Login efetuado com sucesso!</div>
<div id="loginErrado">Usuário ou senha inválidos!</div>

  • It worked, buddy... but what you’ve changed besides ". val()"?

  • The function validarUsuarioSenha must be declared before being referenced on the button. Then include it in the <head> preference.

1

An element of the DOM of the type input have a property value. Thus, using native Javascript you can know the value at the moment using el.value.

When you use jQuery you run a function/method called .val(). What jQuery will do is basically run a function to return the property value. Hence the parentheses that invoke the function. You could get the same thing using .prop(value).

In this specific case using jQuery is unnecessary. Native Javascript works equally on all browsers.

An example would be:

var jVal = $('input').val();
var jProp = $('input').prop('value');
var nativo = document.querySelector('input').value;

console.log(jVal, jProp, nativo); // dá o mesmo em todos

Your code is working:

Browser other questions tagged jquery

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