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:
Tabla de contenidos
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>