Obtener el valor en un cuadro de texto de entrada

1005

¿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" />

Bharanikumar
fuente
1
use este código: var value = $ ('# txt_Name'). val (); También puede establecer el valor usando jquery. mira esta publicación en: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

Respuestas:

1654
//Get
var bla = $('#txt_name').val();

//Set
$('#txt_name').val(bla);
Conrad
fuente
35
@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.
Barry Michael Doyle
3
eliminar las comillas de 'bla'. Debería ser $ ('# txt_name'). Val (bla);
Charles Xavier el
99
@ParbhuBissessar No necesariamente. Si quiere el texto literal 'bla', lo tiene bien. Si quiere el valdel var blaentonces necesita eliminar las comillas.
double_j
observe los get: "val ()" en lugar de "val" puede mirar mi perfil
TheRedstoneTaco
Hice esto pero tengo problemas.
Wasey Raza el
591

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 
RJD22
fuente
66
Sé que esta es una pregunta anterior, pero no olvide que attrtambién puede ser reemplazada por prop. Esto es semánticamente mejor.
Sablefoste
Solo $("#txt_name").val(str);funcionó para mí en Chrome para establecer el valor. Prueba esta publicación .
gkiko
La función de agregar jQuery parece no tener problemas para agregar al HTML mientras mantiene los valores del formulario.
Adam F
1
$ ("# txt_name"). attr ('valor'); El valor / respuesta predeterminado de devolución es incorrecto.
zloctb
1
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 cambia. .val()siempre devolverá el contenido del campo ..
honk31
84

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.

Artur79
fuente
40

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, simplemente use .valueel elemento DOM directamente, así :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
Nick Craver
fuente
@Bharan ¿Por qué necesitas una alternativa?
Doug Molineux el
3
en algún lugar, me gustaría usar una alternativa,
Bharanikumar
16

Debe usar varias formas para 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 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

Use .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);
});
Simplans
fuente
15

Puede obtener el valor de esta manera:

this['inputname'].value

Donde se thisrefiere al formulario que contiene la entrada.

SO está lleno de monos
fuente
8
Esta respuesta supone que thisse refiere al formulario que contiene la entrada.
nandan
15

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

.val( function(index, value) ) 
dilip kumbham
fuente
6

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.

Yuval
fuente
3

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

Mikhail Sirotenko
fuente
3

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);
Muddasir23
fuente
1

Prueba esto. Funcionará seguro.

var userInput = $('#txt_name').attr('value')
H.Ostwal
fuente
¡No, no lo hará! (1) Si no hay un 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, el $('#txt_name').attr('value')todavía devuelve "prueba".
ndsvw
Esta respuesta no es correcta, pero esta es la API que estaba buscando.
Anthony