CriarWeb.com > Manuais > Formulários e Javascript

Anexo I: Rotinas JS para aplicar aos formulários

Veremos vários exemplos de scripts JavaScript aplicáveis a formulários que aumentarão a funcionalidade deste.

Por Eugenia Bahit

Publicado em: 16/1/09

Valorize este artigo:

1. Colocar o foco em um determinado campo ao carregar a página

Escreva seu nome: <input type="text" name="campo1" size="15">

</form>

2. Converte a primeira letra de cada palavra em maiúscula

{
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>

Escreva seu nome: <input type="text" name="campo1" size="15" onKeyUp="Converter(this.exemplo2.campo1)">
<input type="submit" value="Enviar">
</form>

3. Converte a primeira letra do texto em maiúsculas (ao enviar o formulário)

<form name="exemplo3" method="GET" action="pagina.htm" target="_blank">
Escreva seu nome: <input type="text" name="campo1" size="15">
<input type="button" value="Enviar" onClick="Converter2(this.form)">
</form>

4. Escreve um valor indicado em outra janela, no formulário aberto

Formulário da página atual

Por favor, introduz o código correspondente à cor

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

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

Paleta de cores (paleta.htm)

<input type="radio" name="color" value="#800000" onClick="opener.document.exemplo8.campo1.value=cores.color[0].value"><font color="#800000">marrom</font>

<br>

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

5. Comprova que o valor ingressado em dois campos não seja o mesmo

function validarCampos1(form)

{

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

{

alert("A senha não pode ser igual ao nome de usuário");

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

}

form.submit()

}

</script>

Usuário: <input type="text" name="campo1"><br>

Senha: <input type="password" name="campo2"><br>

</form>

6. Comprova que o valor ingressado em dois campos seja igual

function validarCampos2(form)

{

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

{ form.submit(); }

else

{

alert("A repetição da senha não coincide.");

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

}

</script>

Senha: <input type="password" name="campo1"><br>

Repetir senha: <input type="password" name="campo2"><br>

</form>

7. Permite selecionar só uma determinada quantidade de checkbox do mesmo nome

{
a = campo.form.campo1[0].checked;
b = campo.form.campo1[1].checked;

c = campo.form.campo1[2].checked;

d = campo.form.campo1[3].checked;

e = campo.form.campo1[4].checked;

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

if (contador > 3)

    {
    alert("Só pode selecionar 3 opções");
    campo.checked = false;
    }
}
</script>

Por favor, selecione 3 opções como máximo:<br>

<input type="checkbox" name="campo1" value="Opcao 1" onClick="limitarSeleção(this,this.form)">Opção 1<br>

<input type="checkbox" name="campo1" value="Opcao 2" onClick="limitarSeleção(this,this.form)">Opção 2<br>

<input type="checkbox" name="campo1" value="Opcao 3" onClick="limitarSeleção(this,this.form)">Opção 3<br>

<input type="checkbox" name="campo1" value="Opcao 4" onClick="limitarSeleção(this,this.form)">Opção 4<br>

<input type="checkbox" name="campo1" value="Opcao 5" onClick="limitarSeleção(this,this.form)">Opção 5<br>

</form>

8. Seleciona todos os checkbox com um só clique ou desmarca a seleção

<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="campo1" value="Opcao 1">Opção 1<br>
<input type="checkbox" name="campo1" value="Opcao 2">Opção 2<br>
<input type="checkbox" name="campo1" value="Opcao 3">Opção 3<br>
<input type="checkbox" name="campo1" value="Opcao 4">Opção 4<br>
<input type="checkbox" name="campo1" value="Opcao 5">Opção 5<br>

<hr>

9. Seleciona todos os checkbox com um só clique ou desmarca a seleção ou inverte a seleção

form.inverte.checked = false;

}

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

form.inverte.checked = false;

}

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

form.desmarcatodos.checked = false;

}
</script>

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

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

<input type="checkbox" name="inverte" onClick="inverter(this.form)">Inverter seleção

<hr>