Por Eugenia Bahit
7.1 Exemplos de aplicação I: Trabalhando com o valor de um campo
EXEMPLO #1:
Temos uma caixa de texto com um valor padrão. Quando o usuário clica sobre o campo, o valor "desaparece".
O código...
<form name="exemplo1" method="POST">
<input type="text" name="usuario" value="Nome de usuario" onClick="exemplo1.usuario.value=''" size="16">
<br>Password: <input type="password" name="senha" size="6" value="123456" onClick="exemplo1.senha.value=''">
</form>
Os resultados...
EXEMPLO #2:
O valor introduzido em uma caixa de texto é "reproduzido" em outro campo.
O Script...
<script languaje="javascript">
function passaValor(form)
{ exemplo2.campo2.value = exemplo2.campo1.value; }
</script>
O formulário...
<form name="exemplo2" method="POST">
Seu nome: <input type="text" name="campo1" onKeyUp="passaValor(this.form)"><br>
Nome introduzido: <input type="text" name="campo2" ReadOnly>
</form>
Os resultados...
EXEMPLO #3:
Veremos aqui um exemplo mais complexo, no qual se preencherão os campos de texto vazios com a frase "Não oferecido"
O Script...
<script languaje="javascript">
function preencher()
{
var texto = "Não oferecido"
if (exemplo3.nome.value == "") { exemplo3.nome.value = texto; }
if (exemplo3.telefone.value == "") { exemplo3.telefone.value = texto; }
if (exemplo3.cidade.value == "") { exemplo3.cidade.value = texto; }
alert("Os campos em branco se completaram automaticamente");
exemplo3.submit()
}
</script>
O formulário...
<form name="exemplo3" method="POST" target="_blank">
<b>Preencha seu perfil de usuário</b> (opcional)<br>
Nome real: <input type="text" name="nome"><br>
Telefone: <input type="text" name="telefone"><br>
Cidade: <input type="text" name="cidade"><br>
<input type="button" value="Terminar" onClick="preencher()">
</form>
Os resultados...
Se modificamos um pouco o exemplo anterior, podemos fazer que em vez de completar automaticamente os campos, lhe avise ao usuário que deve completá-los para poder enviar o formulário. Isto poderemos fazê-lo avisando ao usuário campo por campo ou enviando um aviso em geral:
EXEMPLO #4: VALIDAR CAMPOS (forma 1)
O Script...
0
<script languaje="javascript">
function validar(form)
{
var error = "Por favor, antes de enviar o formulário,ncomplete os
seguinte campos:nn";
var a = ""
if (form.nome.value == "") { a += " Nome realn"; }
if (form.telefone.value == "") { a += " Telefonen"; }
if (form.cidade.value == "") { a += " Cidaden"; }
if (a != "") { alert(error + a); return true; }
form.submit()
}
</script>
O formulário...
<form name="exemplo4" method="POST" target="_blank">
<b>Preencha seu perfil de usuário</b> (obrigatorio)<br>
Nome real: <input type="text" name="nome"><br>
Telefone: <input type="text" name="telefone"><br>
Cidade: <input type="text" name="cidade"><br>
<input type="button" value="Terminar" onClick="validar(this.form)">
</form>
EXEMPLO #5: VALIDAR CAMPOS (forma 2)
O Script...
<script languaje="javascript">
function alerta(campo)
{ alert("Por favor, completa o campo "+campo) }
function validar2(form)
{
if (form.nome.value == "")
{ alerta('"Nome real"'); form.nome.focus(); return true; }
if (form.telefone.value == "")
{ alerta('"Telefone"'); form.telefone.focus(); return true; }
if (form.cidade.value == "")
{ alerta('"Cidade"'); form.cidade.focus();
return true; }
form.submit()
}
</script>
O formulário...
<form name="exemplo5" method="POST" target="_blank">
<b>Preencha seu perfil de usuário</b> (obrigatorio)<br>
Nome real: <input type="text" name="nome"><br>
Telefone: <input type="text" name="telefone"><br>
Cidade: <input type="text" name="cidade"><br>
<input type="button" value="Terminar" onClick="validar2(this.form)">
</form>
Os resultados...
Outra função muito interessante com JavaScript, é aquela por a qual tomamos os dados introduzidos em distinto campos de texto e transferimos todos os valores a um só campo. É ideal, por exemplo, quando recopilamos informação sobre o domicilio de uma pessoa ou porque não, para tantas outras coisas.
Vejamos o exemplo:
EXEMPLO #6
O Script...
<script languaje="javascript">
function completar(form)
{
form.domicilio.value == ""
if (form.rua.value != "") { form.domicilio.value += form.ruae.value + " "; }
if (form.nro.value != "") { form.domicilio.value += "N°" + form.nro.value + ",
"; }
if (form.andar.value != "") { form.domicilio.value +="Andar " + form.andar.value +
" "; }
if (form.dto.value != "") { form.domicilio.value += "Dpto. "" + form.dto.value
+ "" - "; }
if (form.cep.value != "") { form.domicilio.value += "(" + form.cep.value + ") "; }
if (form.cidade.value != "") { form.domicilio.value += form.cidade.value + ", ";
}
if (form.pais.value != "") { form.domicilio.value += form.pais.value; }
}
</script>
O formulário...
<form name="exemplo6" method="POST" action="exemplos/ej6.asp" target="_blank">
Por favor, complete seu domicilio:<br>
<br>
Rua: <input type="text" name="rua" size="40">
Nro.: <input type="text" name="nro" size="3"><br>
Andar: <input type="text" name="andar" size="2">
Departamento: <input type="text" name="dto" size="2"><br>
Código Postal: <input type="text" name="cep" size="8">
Cidade: <input type="text" name="cidade" size="20">
País: <input type="text" name="pais" size="20"><br><br>
Verifique seu domicilio: <input type="text" name="domicilio" size="80" ReadOnly onFocus="completar(this.form)">
<br>
Se os dados não são corretos, <a onClick="exemplo6.domicilio.value=''"
style="cursor: hand">
pressione aqui</a> e realize as alterações nos campos correspondentes.<br>
<input type="submit" value="Confirmar">
</form>
Os resultados...
