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...
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...
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...
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>
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...
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...
Eugenia Bahit
Analista Programadora LAMP y Scrum Coach