Obtenez la valeur dans une zone de texte d'entrée

1005

Quels sont les moyens d'obtenir et de rendre une valeur d'entrée à l'aide de jQuery?

En voici un:

$(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
la source
1
utilisez ce code: var value = $ ('# txt_Name'). val (); Vous pouvez également définir la valeur à l'aide de jquery. veuillez consulter cet article à: coding-issues.blogspot.in/2013/10/…
Ranadheer Reddy

Réponses:

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

//Set
$('#txt_name').val(bla);
Conrad
la source
35
@Prabs, la question était: "Quels sont les moyens d'obtenir et de rendre une valeur d'entrée à l'aide de jQuery?", L'étiquette n'est pas une entrée.
Barry Michael Doyle
3
supprimez les guillemets de 'bla'. Ce devrait être $ ('# txt_name'). Val (bla);
Charles Xavier
9
@ParbhuBissessar Pas nécessairement. S'il veut le texte littéral «bla», il a raison. S'il veut le valdu var blaalors il doit supprimer les guillemets.
double_j
remarquez le get: "val ()" au lieu de "val" vous pouvez consulter mon profil
TheRedstoneTaco
je l'ai fait mais j'ai des problèmes.
Wasey Raza
591

Vous ne pouvez sélectionner une valeur que des deux manières suivantes:

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

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

Si vous souhaitez utiliser directement du JavaScript pour obtenir la valeur, voici comment:

document.getElementById('txt_name').value 
RJD22
la source
6
Je sais que c'est une question plus ancienne, mais n'oubliez pas que le attrpeut également être remplacé par prop. C'est sémantiquement mieux.
Sablefoste
Fonctionné uniquement $("#txt_name").val(str);pour moi dans Chrome pour définir la valeur. Essayez ce post .
gkiko
La fonction jQuery append ne semble avoir aucun problème à ajouter du code HTML tout en conservant les valeurs du formulaire.
Adam F
1
$ ("# txt_name"). attr ('value'); retourner la valeur par défaut / la réponse est incorrecte!
zloctb
1
gardez à l'esprit que $("#txt_name").attr('value')retournera toujours le contenu de l'attribut "valeur", donc si vous changez le champ de saisie, la valeur ne change pas. .val()retournera toujours le contenu du champ ..
honk31
84

Il y a une chose importante à mentionner:

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

renverra la valeur réelle actuelle d'un champ de texte, par exemple si l'utilisateur y a tapé quelque chose après le chargement d'une page.

Mais:

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

renverra la valeur de DOM / HTML.

Artur79
la source
40

Vous pouvez obtenir l' valueattribut directement car vous savez que c'est un <input>élément, mais votre utilisation actuelle de .val()est déjà celle en cours.

Pour ce qui précède, utilisez simplement .valuel'élément DOM directement, comme ceci :

$(document).ready(function(){
  $("#txt_name").keyup(function(){
    alert(this.value);
  });
});
Nick Craver
la source
@Bharan Pourquoi avez-vous besoin d'une alternative?
Doug Molineux
3
à un endroit, j'aimerais utiliser une alternative,
Bharanikumar
16

Vous devez utiliser différentes méthodes pour obtenir la valeur actuelle d'un élément d'entrée.

MÉTHODE - 1

Si vous souhaitez utiliser un simple .val(), essayez ceci:

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

Obtenir des valeurs depuis Input

// 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();

Définissez la valeur sur Input

// 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ÉTHODE - 2

Utilisez .attr()pour obtenir le contenu.

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

J'ajoute juste un attribut au champ de saisie. value=""L'attribut est celui qui porte le contenu texte que nous avons entré dans le champ de saisie.

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

MÉTHODE - 3

vous pouvez utiliser celui-ci directement sur votre inputélément.

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

Vous pouvez obtenir la valeur comme ceci:

this['inputname'].value

thisfait référence au formulaire qui contient l'entrée.

SO est plein de singes
la source
8
Cette réponse suppose que cela thisfait référence au formulaire qui contient l'entrée.
nandan
15

Je pense que cette fonction est manquée ici dans les réponses précédentes:

.val( function(index, value) ) 
dilip kumbham
la source
6

Pour obtenir la valeur de la zone de texte, vous pouvez utiliser la val()fonction jQuery .

Par exemple,

$('input:textbox').val() - Obtenez la valeur de la zone de texte.

$('input:textbox').val("new text message") - Définissez la valeur de la zone de texte.

Yuval
la source
3

Pour ceux qui comme moi sont des débutants dans JS et obtenir undefinedau lieu de la valeur de texte assurez-vous que votre idne contient pas de caractères invalides .

Mikhail Sirotenko
la source
3

Vous pouvez simplement définir la valeur dans la zone de texte.

Tout d'abord, vous obtenez la valeur comme

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

Après avoir obtenu une valeur définie en entrée comme

$('#txt_name').val(getValue);
Muddasir23
la source
1

Essaye ça. Cela fonctionnera à coup sûr.

var userInput = $('#txt_name').attr('value')
H.Ostwal
la source
Non, ce ne sera pas !! (1) S'il n'y a pas d'attribut "value" ( <input type="text" />), il renvoie undefined. (2) Si vous le faites comme ça <input type="text" value="test" />et que l'utilisateur tape foo dans le champ de saisie, le $('#txt_name').attr('value')retourne toujours "test.
ndsvw
Cette réponse n'est pas correcte mais c'est l'API que je cherchais.
Anthony