> Manuales > Formularios y Javascript

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.

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Manual