Show input value when clicking the [duplicate]

Question

Show input value when clicking the [duplicate]

Navigation

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

0

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><divid="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>

javascript jquery

asked by anonymous 04.10.2018 / 16:25

3 answers

2

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

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

And you do not need to put the event inside a function and call the function through a onclick . Just create an event submit and get the values of the fields within the event:

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

When submitting the form it will execute the event function, taking the current values.

The 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><divid="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>

04.10.2018 / 16:49

1

Change your function to get the updated value:

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

If you want it to still be on the page change the type="submit" to type "button" on your button. I hope I have helped friend.

04.10.2018 / 16:34

Is it always good to deallocate memory before an "abrupt" program exit with the exit function call? round border on EditText Android

score 1 · Accepted Answer

Several things that should be fixed:

You have treated click event twice, both in the onclick attribute of the element and in jQuery with the on function, just one of them;

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

You have searched the values of the fields outside the function, which will cause them to run when the page loads - and when it is loaded the fields are empty. You need to get the values inside the function;

Use the preventDefault function to prevent the form from being submitted, since it is using a submit button

Here's 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><divid="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>