Unidad 8. Formularios (XXI)



8.33. Recibir datos con Javascript.

También podemos recibir los datos con un programa Javascript, algo que se suele utilizar para realizar la validación de datos cuando no es suficiente con las validaciones que nos ofrece la etiqueta input. Aunque en este ejemplo nos hemos limitado a recibir los datos y mostrarlos en la página web.

Lo interesante es saber que podemos recibir los datos con document.getElementById("nom").value; que lo relaciona con el id="nom" de la etiqueta input. Y otra forma de recibir los datos es con document.getElementsByName("apellido")[0].value; que lo relaciona con el name="apellido" de la etiqueta input.

En este caso utilizamos el evento onclick del botón para ejecutar la función Javascript recibir(), en lugar de utilizar el atributo action de la etiqueta form.

Este es el código de la página web que contiene el formulario y la función recibir(), cuando la función es más compleja es conveniente escribirla en un archivo separado de la página web.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Recibir por Javascript</title>
<script type="text/javascript">
function recibir() {
var nomId=document.getElementById("nom").value;
var apeName=document.getElementsByName("apellido")[0].value;
document.getElementById("escribir").innerHTML=" \ Tu nombre es: "+nomId+" \
<br>Tu apellido es: "+apeName;
}
function borrar() {
document.getElementById("escribir").innerHTML=" " ;
} </script> </head> <body> <h3>AulaClic. Recibir por Javascript</h3> <form id="form_js"> <p><input type="text" name="nombre" id="nom" placeholder="Escribe tu nombre" size="20" autofocus ></p> <p><input type="text" name="apellido" placeholder="Escribe tu apellido" size="30"></p> <p><input type="reset" value="Borrar" onclick="borrar()"/></p> <p><input type="button" onclick="recibir()" value="Enviar"></p> </form>
<br/>
<div id="escribir"></div>
</body>
</html>

 

Error, no soporta object

Enero-2019 (V 2.0)
Pág. 8.21
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.