Obtenga el valor en un cuadro de texto de entrada

1067

¿Cuáles son las formas de obtener y representar un valor de entrada usando jQuery?

Acá hay uno:

$(document).ready(function() {
  $("#txt_name").keyup(function() {
    alert($(this).val());
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />
1
1754
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);
4
  • 38
    @Prabs, la pregunta era: "¿Cuáles son las formas de obtener y representar un valor de entrada usando jQuery?", La etiqueta no es una entrada. 24/04/2016 a las 13:37
  • 4
    elimine las comillas de 'bla'. Debe ser $ ('# txt_name'). Val (bla); 2 de nov. De 2016 a las 15:22
  • 11
    @ParbhuBissessar No necesariamente. Si quiere el texto literal 'bla', lo ha hecho bien. Si quiere el valde var blaentonces necesita eliminar las comillas. 15/11/2016 a las 21:49
  • 1
    observe el get: "val ()" en lugar de "val", puede mirar mi perfil 18 de enero de 2018 a las 3:38
602

Solo puede seleccionar un valor de las dos formas siguientes:

// First way to get a value
value = $("#txt_name").val(); 

// Second way to get a value
value = $("#txt_name").attr('value');

Si desea utilizar JavaScript directo para obtener el valor, así es como:

document.getElementById('txt_name').value 
5
  • 8
    Sé que esta es una pregunta anterior, pero no olvide que attrtambién se puede reemplazar por prop. Esto es semánticamente mejor. 4/11/12 a las 7:02
  • 1
    Solo $("#txt_name").val(str);me funcionó en Chrome para establecer el valor. Prueba esta publicación .
    gkiko
    5 feb 2013 a las 21:17
  • 1
    La función de adición de jQuery parece no tener problemas para agregar al HTML mientras mantiene los valores del formulario.
    Adam F
    7 de junio de 2013 a las 19:30
  • 2
    $ ("# txt_name"). attr ('valor'); devuelve el valor predeterminado / ¡la respuesta es incorrecta!
    zloctb
    12 dic 2013 a las 8:09
  • 2
    tenga en cuenta que siempre $("#txt_name").attr('value')devolverá el contenido del atributo "valor", por lo que si cambia el campo de entrada, el valor no cambiará. .val()siempre devolverá el contenido del campo.
    honk31
    15/12/2016 a las 10:51
89

Hay una cosa importante que mencionar:

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

devolverá el valor real actual de un campo de texto, por ejemplo, si el usuario escribió algo allí después de cargar una página.

Pero:

$("#txt_name").attr('value')

devolverá el valor de DOM / HTML.

43

Puede obtener el valueatributo directamente ya que sabe que es un <input>elemento, pero su uso actual de .val()ya es el actual.

Para lo anterior, solo use .valueen el elemento DOM directamente, así :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
0
20

Debe utilizar varias formas de obtener el valor actual de un elemento de entrada.

MÉTODO 1

Si desea utilizar un simple .val(), intente esto:

<input type="text" id="txt_name" />

Obtener valores de la entrada

// use to select with DOM element.
$("input").val();

// use the id to select the element.
$("#txt_name").val();

// use type="text" with input to select the element
$("input:text").val();

Establecer valor en Entrada

// use to add "text content" to the DOM element.
$("input").val("text content");

// use the id to add "text content" to the element.
$("#txt_name").val("text content");

// use type="text" with input to add "text content" to the element
$("input:text").val("text content");

MÉTODO - 2

Úselo .attr()para obtener el contenido.

<input type="text" id="txt_name" value="" />

Solo agrego un atributo al campo de entrada. value=""El atributo es el que lleva el contenido de texto que ingresamos en el campo de entrada.

$("input").attr("value");

MÉTODO - 3

puedes usar este directamente en tu inputelemento.

$("input").keyup(function(){
    alert(this.value);
});
15

Puede obtener el valor de esta manera:

this['inputname'].value

Donde se thisrefiere al formulario que contiene la entrada.

0
15

Creo que esta función se pierde aquí en respuestas anteriores:

.val( function(index, value) ) 
8

Para obtener el valor del cuadro de texto, puede usar la val()función jQuery .

Por ejemplo,

$('input:textbox').val() - Obtener el valor del cuadro de texto.

$('input:textbox').val("new text message") - Establecer el valor del cuadro de texto.

4

Simplemente puede establecer el valor en el cuadro de texto.

Primero, obtienes el valor como

var getValue = $('#txt_name').val();

Después de obtener un valor establecido en la entrada como

$('#txt_name').val(getValue);
3

Para aquellos que, como yo, son novatos en JS y obtienen en undefinedlugar de un valor de texto, asegúrese de que idno contenga caracteres no válidos .

1

Prueba esto. Seguro que funcionará.

var userInput = $('#txt_name').attr('value')
2
  • ¡No, no lo hará! (1) Si no hay ningún atributo "valor" ( <input type="text" />), devuelve indefinido. (2) Si lo hace así <input type="text" value="test" />y el usuario escribe foo en el campo de entrada, $('#txt_name').attr('value')todavía devuelve "prueba.
    ndsvw
    13/12/19 a las 10:40
  • Esta respuesta no es correcta, pero esta es la API que estaba buscando.
    Anthony
    7 feb.20 a las 5:32
0

JS puro

txt_name.value

txt_name.onkeyup = e=> alert(txt_name.value);
<input type="text" id="txt_name" />
0

Puedes probar

let quantity = $('input[name = quantity]').val()

donde el nombre del campo de entrada es cantidad