Show input value by clicking the button

Question

How do I show value I typed in input after clicking the button? mine always returns empty:

var x = document.getElementById("usuario").value;

var usuario = $("#usuario").value; //document.getElementById("user").value;  //  $("#user").value;
var senha = $("#pwd").value;

function Enviar() {
  $("#enviar").on('click', function() {
    alert(usuario)
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="search">
  <input id="term" type="text" value="" />
  <button id="hit" type="button" name="">Search</button>
</div>

<form>
  <fieldset>
    <div class="controls">
      <label for="id">User ID:</label>
      <input type="text" id="usuario" name="usuario" />
      <label for="pwd">Password:</label>
      <input type="password" id="pwd" name="pwd" />
      <input type="submit" id="enviar" onclick="Enviar()" value="Submit" />
    </div>
  </fieldset>
</form>

Answer 1

You are taking the value of the field out of the function, so it will be empty because when loading the page the field has nothing, besides picking the value incorrectly. In jQuery use yourself .val() and not value:

$("#usuario").val();

And you don’t need to put the event inside a function and call the function through a onclick. Just create an event submit and take the values of the fields within the event:

$("form").on('submit', function() {
   var usuario = $("#usuario").val();
   var senha = $("#pwd").val();
   alert(usuario)
});

Submitting the form will execute the event function, taking the current values.

HTML and script would look like this:

var x = $("usuario").val(); // não entendi pra que esta linha serve(?)

$("form").on('submit', function() {
   var usuario = $("#usuario").val(); //document.getElementById("user").value;  //  $("#user").value;
   var senha = $("#pwd").val();
   alert(usuario)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
  <input id="term" type="text" value="" />
  <button id="hit" type="button" name="">Search</button>
</div>

<form>
  <fieldset>
    <div class="controls">
      <label for="id">User ID:</label>
      <input type="text" id="usuario" name="usuario" />
      <label for="pwd">Password:</label>
      <input type="password" id="pwd" name="pwd" />
      <input type="submit" id="enviar" value="Submit" />
    </div>
  </fieldset>
</form>

Answer 2

Change your function to get the updated value:

function Enviar() {
  $("#enviar").on('click', function() {
    alert($("#usuario").val())
  });
}

If you want it to continue on the page change the type="Submit" to type"button" on your button. I hope I helped friend.

Answer 3

Several things to be corrected:

1. You treated event click twice, both in the attribute onclick how much element in jQuery with the function on, just one of them;

2. You have accessed the attribute value with jQuery, but this is done in JS vanilla. To fetch the value of the element in jQuery, use the function val();

3. You have searched the values of the fields outside the function, which will cause them to be executed when the page is loaded - and when the fields are loaded they are empty. You need to get the values within the function;

4. Use the function preventDefault to prevent the form from being submitted, since you are using a button submit;

See how it would look:

$("#enviar").on('click', function(event) {
  event.preventDefault();
  var usuario = $("#usuario").val();
  var senha = $("#pwd").val();
  alert(usuario)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="search">
  <input id="term" type="text" value="" />
  <button id="hit" type="button" name="">Search</button>
</div>

<form>
  <fieldset>
    <div class="controls">
      <label for="id">User ID:</label>
      <input type="text" id="usuario" name="usuario" />
      <label for="pwd">Password:</label>
      <input type="password" id="pwd" name="pwd" />
      <input type="submit" id="enviar" value="Submit" />
    </div>
  </fieldset>
</form>