6 ejemplos útiles de JavaScript para mejorar los formularios

4min

A continuación os mostramos seis ejemplos que serán muy útiles para mejorar formularios en proyectos de Javascript.

En un post anterior hablábamos de como validar formularios en Javascript, ahora os vamos a indicar paso a paso como podéis aplicar mejoras a estos formularios:

Índice

Contar el número de palabras que contiene un textarea

<script languaje='javascript'>

function contarPalabras(form)

{
texto = form.mensaje.value
texto = texto.split(' ')
form.cantidad.value=texto.length
}
</script>

 <form name='formulario1' method='POST' action='miPagina.htm' target='_blank'>

<b>Por favor, redacte aquí su mensaje</b> Palabras escritas:

<input type='text' name='cantidad' value='0' size='2'><br>

<textarea rows='4' cols='35' name='mensaje' onKeyPress='contarPalabras(this.form); if (event.keycode1 == 13) form.mensaje.value +=' ';'></textarea><br>

<input type='submit' value='Enviar'>

</form>

Habilitar o deshabilitar el botón submit

<script languaje='javascript'>
function deshabilita(form)
{
    if ((form.nombre.value != '') & (form.apellido.value != ''))
    { form.enviar.disabled = false; }

    else {
    form.enviar.disabled = true; }
}
</script>


<form name='formulario2' method='POST' action='miPagina.htm' target='_blank'>
Nombre: <input type='text' name='nombre' size='20' onKeyUp='deshabilita(this.form)'><br>
Apellido: <input type='text' name='apellido' size='20' onKeyUp='deshabilita(this.form)'><br>
<input type='submit' name='enviar' value='Enviar' disabled>
</form>

Mostrar un mensaje de confirmación para borrar un formulario

<script languaje='javascript'>
function ConfirmarBorrado(form)
{
borrar = window.confirm('Se van a borrar los datos introducidos en ell formulario');
(borrar)?form.reset():'return false';
}
</script>
 

<form name='formulario3' method='POST' action='miPagina.htm' target='_blank'>

Nombre: <input type='text' name='nombre' size='20'><br>
Profesión: <input type='text' name='profesion' size='20'><br>
<input type='button' value='Borrar' onClick='ConfirmarBorrado(this.form)'>

</form>

Poner el foco en el campo que elijamos

<BODY onLoad='this.document.formulario4.campo1.focus()'>

 <form name='formulario4' method='GET' action='miPagina.htm' target='_blank'>
Color preferido: <input type='text' name='campo1' size='15'>
<input type='submit' value='Enviar'>
</form>

Poner la primera letra de cada palabra introducida en el campo en mayúscula

<script language='javascript'>
function Convertir(objeto)

{
var index;
var tmpStr;
var tmpChar;
var preString;
var postString;
var strlen;
tmpStr = objeto.value.toLowerCase();
strLen = tmpStr.length;
    if (strLen > 0)
    {
    for (index = 0; index < strLen; index++)
        {
        if (index == 0)
            {
            tmpChar = tmpStr.substring(0,1).toUpperCase();
            postString = tmpStr.substring(1,strLen);
            tmpStr = tmpChar + postString;
            }
            else
            {
            tmpChar = tmpStr.substring(index, index+1);
                if (tmpChar == ' ' & index < (strLen-1))
                {
                tmpChar = tmpStr.substring(index+1, index+2).toUpperCase();
                preString = tmpStr.substring(0, index+1);
                postString = tmpStr.substring(index+2,strLen);
                tmpStr = preString + tmpChar + postString;
                }
            }
        }
    }
objeto.value = tmpStr;
}
</script>

 <form name='formulario5' method='GET' action='pagina.htm' target='_blank'>
Escribe una frase: <input type='text' name='campo1' size='25' onKeyUp='Convertir(this. formulario5.campo1)'>
<input type='submit' value='Enviar'>
</form>

Realizar una comprobación para que el valor de dos campos sea el mismo

<script languaje='javascritp'>

function validarCampos2(form)
{
    if(form.campo2.value == form.campo1.value)
    { form.submit(); }
    else
    {
    alert('La contraseña no coincide.');
    form.campo2.value = ''; form.campo2.focus(); return true;
    }
}
</script>

<form name='formulario6' method='POST' action='miPagina.htm' target='_blank'>
Contraseña: <input type='password' name='campo1'><br>
Repite la contraseña: <input type='password' name='campo2'><br>
<input type='button' value='Registrarse' onClick='validarCampos2(this.form)'>
</form>
Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: