Hasta ahora hemos visto como crear un formulario con controles de tipo
BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar
caracteres por teclado).
Ahora veremos la importancia de definir un id a todo control de un formulario.
Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona:
Ahora veremos la importancia de definir un id a todo control de un formulario.
Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona:
<html>
<head></head>
<body>
<script type="text/javascript">
function mostrar()
{
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
alert('Ingresó el nombre:' + nom);
alert('Y la edad:' + ed);
}
</script>
<form>
Ingrese su nombre:
<input type="text" id="nombre"><br>
Ingrese su edad:
<input type="text" id="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>
</body>
</html>
En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El
evento que se dispara al presionar el botón se llama mostrar.La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT.La propiedad "id" es un identificar único para cualquier marca HTML que luego nos permite desde Javascript acceder a dicho elemento.
El método getElementById nos retorna una referencia del objeto HTML que le pasamos como parámetro. a partir de este objeto accedemos a la propiedad value que almacena el valor ingresado por el operador en el control TEXT.
Luego de extraer los valores ingresados por el operador los mostramos utilizando la función alert:
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
alert('Ingresó el nombre:' + nom);
alert('Y la edad:' + ed);
No hay comentarios.:
Publicar un comentario