2010-11-18 18 views
7

¿Cómo acceder a un cuadro de texto HTML mediante una función de JavaScript?¿Cómo acceder a un cuadro de texto HTML desde javascript?

+0

¿Quiere decir, para obtener el valor del cuadro de texto? –

+0

sí exactamente. sin volver al servidor aunque –

+0

[Más formas en el hilo anterior] (http://stackoverflow.com/questions/4206336/how-do-i-use-javascript-to-update-the-values-of-hidden- campos de entrada/4206459 # 4206459) – Tobias

Respuesta

9

Conjunto propiedad ID en la caja de texto y utilizar document.getElementById() la función ... Ejemplo a continuación:

<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

Para ser conciso, esto realmente no obtendría el valor del cuadro de texto (TEXTBOX_ID) a menos que llamara a la función doSomethingWithTextBox(). Debería llamar a la función doSomethingWithTextBox() después de su etiqueta de entrada (TEXTBOX_ID); de lo contrario, doSomethingWithTextBox() buscaría un cuadro de texto que todavía no existe, y usted; d obtendría un error. –

4

document.getElementById ('textboxid'). valor o document.formname.textboxname.value

5

Dé su cuadro de texto un atributo id, y después, ir a buscar con document.getElementById('<textbox id>').

5

En primer lugar hay que ser capaz de obtener un DOM (Document Object Model) la referencia al cuadro de texto :

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

Aviso el atributo id, el cuadro de texto ahora tiene el id mytextbox.

siguiente paso es conseguir que la referencia en JavaScript:

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

Esto recuperará un elemento HTML por su atributo id. Tenga en cuenta que esos identificadores deben ser únicos, por lo que no puede tener dos cuadros de texto con el mismo ID.

Ahora el paso final es para recuperar el valor del cuadro de texto:

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

La propiedad value contiene el contenido de la caja de texto, y eso es todo!

Para mayor referencia es posible que desee echa un vistazo a algunas cosas más en el MDC:
GetElementByID Reference
Input Element Reference
A general overview of the DOM

6

Muy simplemente, intente esto:

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

El variable textboxValue sería igual a wha tever que ha escrito en el cuadro de texto.

Recuerde que debe colocar su script, si está escrito de esta manera, después de que el cuadro de texto (input campo) aparece en su HTML; de lo contrario, cuando la página carga primero obtendrá un error, porque el script está buscando input campo que aún no ha sido creado por el navegador.

Espero que esto ayude!

Cuestiones relacionadas