Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Formulários e Javascript
SEÇÕES
Manuais relacionados
+Formulários e Javascript
Categorias
+Manuais de Javascript

Índice do Manual Formulários e Javascript
+ O objeto form, propriedades e métodos
+ Sub-propriedades do objeto form e eventos
+ Valores da propriedade action
+ O valor da propriedade method e target
+ Objetos de um formulário
+ Os objetos text e password
+ Os objetos text e password II
+ Os objetos text e password III
+ Os objetos text e password IV

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net

Os objetos text e password II

Tomamos os dados introduzidos em diferentes campos de texto e transferimos todos os valores a um só campo.


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


Password:

 

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

Seu nome:
Nome introduzido:

 

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

Preencha seu perfil de usuário (opcional)
Nome real:
Telefone:
Cidade:


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>

 

 

Preencher seu perfil de usuario (obrigatorio)
Nome real:
Telefone:
Cidade:

 

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

Preecha seu perfil de usuário (obrigatorio)
Nome real:
Telefone:
Cidade:


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

Por favor, complete seu domicilio:

Rua: Nro.:
Andar: Departamento:
Código Postal: Cidade: País:

Verifique seu domicilio: os dados se verão uma vez que o campo tomou o foco (pode ser mediante a tecla TAB ou clicando no campo).


Se os dados não são corretos, pressione aqui e realize as alterações nos campos correspondentes.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Formulários e Javascript
Seguinte: Os objetos text e password III
Anterior: Os objetos text e password
< Índice de Formulários e Javascript

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Manuais de Javascript


Comentários dos visitantes
Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
Acrescentar um comentário do artigo Acrescentar um comentário do artigo



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites