Los objetos text y password II

Tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo.

7.1 Ejemplos de aplicación I: Trabajando con el valor de un campo


EJEMPLO #1:

Tenemos una caja de texto con un valor por defecto. Cuando el usuario hace click sobre el campo, el valor "desaparece".


 

El código...

 

<form name="ejemplo1" method="POST">

<input type="text" name="usuario" value="Nombre de usuario" onClick="ejemplo1.usuario.value=''" size="16">

<br>Password: <input type="password" name="clave" size="6" value="123456" onClick="ejemplo1.clave.value=''">

</form>

 

Los resultados...


Password:

 

EJEMPLO #2:

El valor introducido en una caja de texto es "reproducido" en otro campo.


 

El Script...

 

<script languaje="javascript">

function pasaValor(form)

{ ejemplo2.campo2.value = ejemplo2.campo1.value; }

</script>

 

El formulrio...

<form name="ejemplo2" method="POST">

Tu nombre: <input type="text" name="campo1" onKeyUp="pasaValor(this.form)"><br>

Nombre introducido: <input type="text" name="campo2" ReadOnly>

</form>

 

Los resultados...

Tu nombre:
Nombre introducido:

 

EJEMPLO #3:

Veremos aquí un ejemplo más complejo, en el cual se rellenarán los campos de texto vacíos con la frase "No aportado"


 

El Script...

 

<script languaje="javascript">

function rellenar()

{

var texto = "No aportado"

if (ejemplo3.nombre.value == "") { ejemplo3.nombre.value = texto; }

if (ejemplo3.telefono.value == "") { ejemplo3.telefono.value = texto; }

if (ejemplo3.ciudad.value == "") { ejemplo3.ciudad.value = texto; }

alert("Los campos en blanco se completaron automáticamente");

ejemplo3.submit()

}

</script>

 

El formulario...

 

<form name="ejemplo3" method="POST" target="_blank">

<b>Rellena tu perfil de usuario</b> (opcional)<br>

Nombre real: <input type="text" name="nombre"><br>

Teléfono: <input type="text" name="telefono"><br>

Ciudad: <input type="text" name="ciudad"><br>

<input type="button" value="Terminar" onClick="rellenar()">

</form>

 

Los resultados...

Rellena tu perfil de usuario (opcional)
Nombre real:
Teléfono:
Ciudad:


Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar automáticamente los campos, le avise al usuario que debe completarlos para poder enviar el formulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un aviso en general:


EJEMPLO #4: VALIDAR CAMPOS (forma 1)


 

El Script...

 

<script languaje="javascript">
function validar(form)
{
var error = "Por favor, antes de enviar el formulario,\ncomplete los siguientes campos:\n\n";
var a = ""

    if (form.nombre.value == "") { a += " Nombre real\n"; }
    if (form.telefono.value == "") { a += " Teléfono\n"; }
    if (form.ciudad.value == "") { a += " Ciudad\n"; }

    if (a != "") { alert(error + a); return true; }

form.submit()
}
</script>
 

El formulario...

 

<form name="ejemplo4" method="POST" target="_blank">

<b>Rellena tu perfil de usuario</b> (obligatorio)<br>

Nombre real: <input type="text" name="nombre"><br>

Teléfono: <input type="text" name="telefono"><br>

Ciudad: <input type="text" name="ciudad"><br>

<input type="button" value="Terminar" onClick="validar(this.form)">

</form>

 

 

Rellena tu perfil de usuario (obligatorio)
Nombre real:
Teléfono:
Ciudad:

 

EJEMPLO #5: VALIDAR CAMPOS (forma 2)


 

El Script...

 

<script languaje="javascript">
function alerta(campo)
{ alert("Por favor, completa el campo "+campo) }

function validar2(form)
{
    if (form.nombre.value == "")
    { alerta('\"Nombre real\"'); form.nombre.focus(); return true; }

   

    if (form.telefono.value == "")

    { alerta('\"Teléfono\"'); form.telefono.focus(); return true; }

 

    if (form.ciudad.value == "")

    { alerta('\"Ciudad\"'); form.ciudad.focus(); return true; }

form.submit()
}
</script>
 

El formulario...

 

<form name="ejemplo5" method="POST" target="_blank">

<b>Rellena tu perfil de usuario</b> (obligatorio)<br>

Nombre real: <input type="text" name="nombre"><br>

Teléfono: <input type="text" name="telefono"><br>

Ciudad: <input type="text" name="ciudad"><br>

<input type="button" value="Terminar" onClick="validar2(this.form)">

</form>

 

Los resultados...

Rellena tu perfil de usuario (obligatorio)
Nombre real:
Teléfono:
Ciudad:


Otra función muy interesante con JavaScript, es aquella por la cual tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Es ideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por que no, para tantas otras cosas.

Veamos el ejemplo:


EJEMPLO #6


 

El Script...

 

<script languaje="javascript">
function completar(form)
{
form.domicilio.value == ""

if (form.calle.value != "") { form.domicilio.value += form.calle.value + " "; }
if (form.nro.value != "") { form.domicilio.value += "N°" + form.nro.value + ", "; }
if (form.piso.value != "") { form.domicilio.value +="Piso " + form.piso.value + " "; }
if (form.dto.value != "") { form.domicilio.value += "Dpto. \"" + form.dto.value + "\" - "; }
if (form.cp.value != "") { form.domicilio.value += "(" + form.cp.value + ") "; }
if (form.ciudad.value != "") { form.domicilio.value += form.ciudad.value + ", "; }
if (form.pais.value != "") { form.domicilio.value += form.pais.value; }
}
</script>
 

El formulario...

 

<form name="ejemplo6" method="POST" action="ejemplos/ej6.asp" target="_blank">

Por favor, complete su domicilio:<br>

<br>

Calle: <input type="text" name="calle" size="40">

Nro.: <input type="text" name="nro" size="3"><br>

Piso: <input type="text" name="piso" size="2">

Departamento: <input type="text" name="dto" size="2"><br>

Código Postal: <input type="text" name="cp" size="8">

Ciudad: <input type="text" name="ciudad" size="20">

País: <input type="text" name="pais" size="20"><br><br>

 

Verifique su domicilio: <input type="text" name="domicilio" size="80" ReadOnly onFocus="completar(this.form)">

<br>

Si los datos no son correctos, <a onClick="ejemplo6.domicilio.value=''" style="cursor: hand">
presione aquí</a> y realice los cambios en los campos correspondientes.<br>

<input type="submit" value="Confirmar">

</form>

 

Los resultados...

Por favor, complete su domicilio:

Calle: Nro.:
Piso: Departamento:
Código Postal: Ciudad: País:

Verifique su domicilio: lo datos se verán una vez que el campo tomo el foco (puede ser mediante la tecla TAB o haciendo click en el campo).


Si los datos no son correctos, presione aquí y realice los cambios en los campos correspondientes.

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

Santiago

03/8/2006
Os felicito por el gran trabajo que estais haciendo, los ejemplos son super claros pero ya sabeis la ley de Murphy. siempre que buscamos un ejemplo para nuestro problema, encontramos de todo menos el que necesitamos. Podriais decirme algun ejemplo en que se transfiera el valor elegido en un select a un campo de tecto dentro del mismo formulario? Muchas gracias por la gran ayuda que proporcionais a los que intentamos aprender a programar.

Un abrazo y seguir con esta estupenda web

Santiago

13/11/2016
CONSULTA
Buenos dias, muchisimas gracias por compartir estos conocimientos!! . Quiero saber como puedo practicar esto, entiendo los conceptos pero..como lo paso a la practica? intente ponerlo en un editor de código y no funciona no veo en la pagina lo que intento que aparezca.