6 ejemplos útiles de JavaScript para mejorar los formularios

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

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

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>

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
GRATIS
Consigue tu backup ahora