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

Où 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.