2010-11-18 5 views
7

Comment accéder à une zone de texte HTML par une fonction javascript?Comment accéder à une zone de texte HTML depuis javascript?

+0

Voulez-vous dire, pour obtenir la valeur de la zone de texte? –

+0

oui exactement. sans retourner au serveur par –

+0

[Plus de façons dans le fil précédent] (http://stackoverflow.com/questions/4206336/how-do-i-use-javascript-to-update-the-values-of-hidden- input-fields/4206459 # 4206459) – Tobias

Répondre

9

Set propriété ID sur zone de texte et utiliser la fonction document.getElementById() ... Exemple ci-dessous:

<html> 
<head> 
<script type="text/javascript"> 

function doSomethingWithTextBox() 
{ 
    var textBox = document.getElementById('TEXTBOX_ID'); 
    // do something with it ... 

} 

</script> 
</head> 

<body> 

<input type="text" id="TEXTBOX_ID"> 

</body> 
</html> 
+4

Par souci de concision, cela n'obtiendrait pas réellement la valeur de la zone de texte (TEXTBOX_ID) sauf si vous appeliez la fonction doSomethingWithTextBox(). Vous devrez appeler la fonction doSomethingWithTextBox() après votre balise d'entrée (TEXTBOX_ID) sinon, doSomethingWithTextBox() recherchera une zone de texte qui n'existe pas encore, et vous obtiendrez une erreur. –

4

document.getElementById ('textboxid') valeur. ou document.formname.textboxname.value

5

Donnez votre textbox un attribut id, et après, vient le chercher avec document.getElementById('<textbox id>').

5

D'abord, vous devez être en mesure d'obtenir une référence DOM (modèle objet de document) à la zone de texte :

<input type="text" id="mytextbox" value="Hello World!" /> 

Notez l'attribut id, la zone de texte a maintenant l'ID mytextbox.

La prochaine étape est d'obtenir la référence en JavaScript:

var textbox = document.getElementById('mytextbox'); // assign the DOM element reference to the variable "textbox" 

Cela récupérer un élément HTML par son attribut id. Notez que ces identifiants doivent être uniques, vous ne pouvez donc pas avoir deux zones de texte avec le même identifiant.

Maintenant, la dernière étape consiste à récupérer la valeur de la zone de texte:

alert(textbox.value); // alert the contents of the textbox to the user 

La propriété value contient le contenu de la zone de texte, et voilà!

Pour plus référence, vous pouvez vérifier certaines choses sur au MDC:
GetElementByID Reference
Input Element Reference
A general overview of the DOM

6

Très simplement, essayez ceci:

<!doctype html> 
<html> 
    <head> 
     … 
    </head> 
<body> 
    <form> 
     <input id="textbox" type="text" /> 
    </form> 
    <script> 
     var textboxValue = document.getElementById("textbox").value; 
    </script> 
</body> 

Le variable textboxValue équivaudrait à wha vous avez tapé dans la zone de texte. Rappelez-vous que vous devez placer votre script, s'il est écrit simplement, après que la zone de texte (input) apparaisse dans votre HTML, sinon lorsque la page se chargera, vous obtiendrez une erreur, car le script cherche input champ qui n'a pas encore été créé par le navigateur.

J'espère que cela aide!

Questions connexes