> Manuales > Formularios y Javascript

Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarán la funcionalidad de éste.

 

 

1. Colocar el foco en un determinado campo al cargar la página

 

<BODY onLoad="this.document.ejemplo1.campo1.focus()">

 

<form name="ejemplo1" method="GET" action="pagina.htm" target="_blank">

Escribe tu nombre: <input type="text" name="campo1" size="15">

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

</form>

 

Escribe tu nombre:

 

2. Convierte la primer letra de cada palabra 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="ejemplo2" method="GET" action="pagina.htm" target="_blank">

Escribe tu nombre: <input type="text" name="campo1" size="15" onKeyUp="Convertir(this.ejemplo2.campo1)">
<input type="submit" value="Enviar">
</form>

 

Escribe tu nombre:

 

3. Convierte la primer letra del texto en mayúsculas (al enviar el formulario)

 

<script language="javascript">
function Convertir2(form)
{
texto=form.campo1.value+" ";
texto=texto.toLowerCase();
texto1="";
punc=",.?!:;)'";
punc+='"';
while ((texto.length>0)&&(texto.indexOf(" ")>-1))
    {
    pos=texto.indexOf(" ");
    wrd=texto.substring(0,pos);
    wrdpre="";
        if (punc.indexOf(wrd.substring(0,1))>-1)
        {
        wrdpre=wrd.substring(0,1);
        wrd=wrd.substring(1,wrd.length);
        }
        cmp=" "+wrd+" ";
        for (var i=0;i<9;i++)
        {
        p=wrd.indexOf(punc.substring(i,i+1));
            if (p==wrd.length-1)
            {
            cmp=" "+wrd.substring(0,wrd.length-1)+" ";
            i=9;
            }
        }
    if (cmp.indexOf(cmp)<0)
    {
    ltr=wrd.substring(0,1);
    ltr=ltr.toUpperCase();
    wrd=ltr+wrd.substring(1,wrd.length);
    }
    texto1+=wrdpre+wrd+" ";
    texto=texto.substring((pos+1),texto.length);
    }
ltr=texto1.substring(0,1);
ltr=ltr.toUpperCase();
texto1=ltr+texto1.substring(1,texto1.length-1);
form.campo1.value=texto1;
}
</script>

 

<form name="ejemplo3" method="GET" action="pagina.htm" target="_blank">
Escribe tu nombre: <input type="text" name="campo1" size="15">
<input type="button" value="Enviar" onClick="Convertir2(this.form)">
</form>

 

Escribe tu nombre:

 

4. Escribe un valor indicado en otra ventana, en el formulario abierto

 

Formulario de la página actual

<form name="ejemplo8" method="GET" action="pagina.htm" target="_blank">

Por favor, introduce el código correspondiente al color

Código color: <input type="text" name="campo1" size="7">

<a onClick="window.open('ejemplos/paleta.htm',null,'widht=150,height=100')" style="cursor: hand">Ver Paleta</a>

<input type="submit" value="Enviar">
</form>

 

Paleta de colores (paleta.htm)

<form name="colores">

<input type="radio" name="color" value="#800000" onClick="opener.document.ejemplo8.campo1.value=colores.color[0].value"><font color="#800000">marrón</font>

<br>

<input type="radio" name="color" value="#FF00FF" onClick="opener.document.ejemplo8.campo1.value=colores.color[1].value"><font color="#FF00FF">fucsia</font>

<br>
<a href="javascript:window.close()"><b>x cerrar ventana</b></a>
</form>

 

Por favor, introduce el código correspondiente al color

Código color: Ver Paleta

 

5. Comprueba que el valor ingresado en dos campos no sea el mismo

 

<script languaje="javascritp">

function validarCampos1(form)

{

    if(form.campo1.value == form.campo2.value)

    {

    alert("La contraseña no puede ser igual al nombre de usuario");

    form.campo2.value = ""; form.campo2.focus(); return true;

    }

form.submit()

}

</script>

 

<form name="ejemplo9" method="POST" action="pagina.htm" target="_blank">

Usuario: <input type="text" name="campo1"><br>

Contraseña: <input type="password" name="campo2"><br>

<input type="button" value="Registrarse" onClick="validarCampos1(this.form)">

</form>

 

Usuario:
Contraseña:

 

6. Comprueba que el valor ingresado en dos campos sea igual

 

<script languaje="javascritp">

function validarCampos2(form)

{

    if(form.campo2.value == form.campo1.value)

    { form.submit(); }

    else

    {

    alert("La repetición de la contraseña no coincide.");

    form.campo2.value = ""; form.campo2.focus(); return true;

    }

}

</script>

 

<form name="ejemplo10" method="POST" action="pagina.htm" target="_blank">

Contraseña: <input type="password" name="campo1"><br>

Repetir contraseña: <input type="password" name="campo2"><br>

<input type="button" value="Registrarse" onClick="validarCampos2(this.form)">

</form>

 

Contraseña:
Repetir contraseña:

 

7. Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre

 

<script language="javascript">
function limitarSelección(casilla,form)

{
a = casilla.form.casilla1[0].checked;
b = casilla.form.casilla1[1].checked;

c = casilla.form.casilla1[2].checked;

d = casilla.form.casilla1[3].checked;

e = casilla.form.casilla1[4].checked;


contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0) + (d ? 1 : 0) + (e ? 1 : 0);

    if (contador > 3)

    {
    alert("Solo puedes seleccionar 3 opciones");
    casilla.checked = false;
    }
}
</script>

 

<form name="ejemplo11" method="GET" action="pagina.htm" target="_blank">

Por favor, seleccione 3 opciones como máximo:<br>

<input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSelección(this,this.form)">Opción 1<br>

<input type="checkbox" name="casilla1"  value="Opcion 2" onClick="limitarSelección(this,this.form)">Opción 2<br>

<input type="checkbox" name="casilla1"  value="Opcion 3" onClick="limitarSelección(this,this.form)">Opción 3<br>

<input type="checkbox" name="casilla1"  value="Opcion 4" onClick="limitarSelección(this,this.form)">Opción 4<br>

<input type="checkbox" name="casilla1"  value="Opcion 5" onClick="limitarSelección(this,this.form)">Opción 5<br>

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

</form>

 

Por favor, seleccione 3 opciones como máximo:
Opción 1
Opción 2
Opción 3
Opción 4
Opción 5

 

8. Selecciona todos los checkbox con un solo click o los deselecciona

 

<script language="javascript">
function todos(form)
{
    for (i = 0; i < form.casilla1.length; i++)
    form.casilla1[i].checked = true;
    form.desmarcatodos.checked = false;
}

function ninguno(form)
{
    for (i = 0; i < form.casilla1.length; i++)
    form.casilla1[i].checked = false;
    form.marcatodos.checked = false;
}
</script>

 

<form name="ejemplo12" method="GET" action="pagina.htm" target="_blank">

<input type="checkbox" name="marcatodos" onClick="todos(this.form)">Marcar todos |

<input type="checkbox" name="desmarcatodos" onClick="ninguno(this.form)">Desmarcar todos

<hr>

<input type="checkbox" name="casilla1" value="Opcion 1">Opción 1<br>
<input type="checkbox" name="casilla1" value="Opcion 2">Opción 2<br>
<input type="checkbox" name="casilla1" value="Opcion 3">Opción 3<br>
<input type="checkbox" name="casilla1" value="Opcion 4">Opción 4<br>
<input type="checkbox" name="casilla1" value="Opcion 5">Opción 5<br>

<hr>

<input type="submit" value="Enviar">
</form>


Marcar todos | Desmarcar todos


Opción 1
Opción 2
Opción 3
Opción 4
Opción 5


 

9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección

 

<script language="javascript">
function todos2(form)
{
    for (i = 0; i < form.casilla1.length; i++)
    form.casilla1[i].checked = true;
    form.desmarcatodos.checked = false;

    form.invierte.checked = false;

}

function ninguno2(form)
{
    for (i = 0; i < form.casilla1.length; i++)
    form.casilla1[i].checked = false;
    form.marcatodos.checked = false;

    form.invierte.checked = false;

}

 

function invertir(form)
{
    for (i = 0; i < form.casilla1.length; i++)
    form.casilla1[i].checked = !form.casilla1[i].checked;
    form.marcatodos.checked = false;

    form.desmarcatodos.checked = false;

}
</script>

 

<form name="ejemplo13" method="GET" action="pagina.htm" target="_blank">

<input type="checkbox" name="marcatodos" onClick="todos(this.form)">Marcar todos |

<input type="checkbox" name="desmarcatodos" onClick="ninguno(this.form)">Desmarcar todos |

<input type="checkbox" name="invierte" onClick="invertir(this.form)">Invertir selección

<hr>

<input type="checkbox" name="casilla1" value="Opcion 1">Opción 1<br>
<input type="checkbox" name="casilla1" value="Opcion 2">Opción 2<br>
<input type="checkbox" name="casilla1" value="Opcion 3">Opción 3<br>
<input type="checkbox" name="casilla1" value="Opcion 4">Opción 4<br>
<input type="checkbox" name="casilla1" value="Opcion 5">Opción 5<br>

<hr>

<input type="submit" value="Enviar">
</form>

 

Marcar todos | Desmarcar todos | Invertir selección


Opción 1
Opción 2
Opción 3
Opción 4
Opción 5


 

10. Cuenta la cantidad de checkbox o radio que hay seleccionados

 

<script languaje="javascript">

function ContarCasillas(form)

{

var total = 0;

var maximo = form.casilla1.length;

 

    for(i = 0; i < maximo; i++)

    if (form.casilla1[i].checked == true)

    { total +=1; }

 

alert("Se han seleccionado " + total + " opciones")

}

</script>

 

<form name="ejemplo14" method="GET" action="pagina.htm" target="_blank">

<input type="checkbox" name="casilla1" value="Rojo">Rojo<br>

<input type="checkbox" name="casilla1" value="Azul">Azul<br>

<input type="checkbox" name="casilla1" value="Amarillo">Amarillo<br>

<input type="checkbox" name="casilla1" value="Verde">Verde<br>

<input type="button" value="Contar casillas" onClick="ContarCasillas(this.form)">

</form>

 

Rojo
Azul
Amarillo
Verde

 

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Manual