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


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

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 

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.


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);
  });
});

@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);
});

15

Vous pouvez obtenir la valeur comme ceci:

this['inputname'].value

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


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) ) 

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.


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 .


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

1

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

var userInput = $('#txt_name').attr('value')

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.