Como pegar dados do usuário
Vamos aprender a pegar os dados do usuário via JQuery.
Mostrar na página os dados e fazer uma verificação.
Dentro da tag "body" coloque essas tags:
// campo de texto para pegar o nome
h2" Digite seu nome: "/h2
input type="text" id="nome"
//campo de número para pegar a idade
h2" Digite sua idade: "/h2
input type="number" id="idade"
// botão para enviar os dados, ativando a funçao pegar dados
input type="submit" onclick="pegarDados()" value="Enviar dados"
Veja como ele fica na página:
Digite seu nome:
Digite sua idade:
Veja o código na imagem abaixo:
Agora vamos fazer o evento "onclick", criar a função, dentro da tag "head", crie a tag script.
Dentro da tag "script" adicione esses códigos:
Primeira coisa é criar as variáveis que iram guardar os dados digitados:
___// variáveis
___ nome = "" ; => inicia vazia.
___ idade = "" ; => inicia vazia.
___// Função pegar dados
___function pegarDados() {
________// pega o valor, no id "nome" e salva na var "nome"
________nome = document.getElementById("nome").value;
________//pega o valor, dentro do "id = idade ", e salva na var "idade"
________idade = document.getElementById("idade").value;
___} => fecha a função
Pegamos os dados que o usuário digitou.
Veja o código na imagem abaixo:
Agora para exibir os dados na página, dentro da tag "body", adicione essas tags:
h2Seu nome é:/h2
p id="valorDigitadoNome"> /p
h2Sua idade é:/h2
p id="valorDigitadoNome"> /p
Veja como fica na página:
Seu nome é :
Sua idade é :
Veja o código na imagem abaixo:
Dentro da "função" que usamos para pegar os dados, vamos adicionar:
// vai pegar o valor da var "nome" e passar para o id "valorDigitadoNome"
document.getElementById("valorDigitadoNome").innerHTML = nome;
// pega o valor da var "idade" e passa para o id "valorDigitadoIdade"
document.getElementById("valorDigitadoIdade").innerHTML = idade;
Veja o código na imagem abaixo:
Só adicionar eles lá e já vai mostra na página o valor digitado pelo usuário na página.
// campo de texto para pegar o nome
h2" Digite seu nome: "/h2
input type="text" id="nome"
//campo de número para pegar a idade
h2" Digite sua idade: "/h2
input type="number" id="idade"
// botão para enviar os dados, ativando a funçao pegar dados
input type="submit" onclick="pegarDados()" value="Enviar dados"
Veja como ele fica na página:
Digite seu nome:
Digite sua idade:
Primeira coisa é criar as variáveis que iram guardar os dados digitados:
___// variáveis
___ nome = "" ; => inicia vazia.
___ idade = "" ; => inicia vazia.
___// Função pegar dados
___function pegarDados() {
________// pega o valor, no id "nome" e salva na var "nome"
________nome = document.getElementById("nome").value;
________//pega o valor, dentro do "id = idade ", e salva na var "idade"
________idade = document.getElementById("idade").value;
___} => fecha a função
Pegamos os dados que o usuário digitou.___function pegarDados() {
________// pega o valor, no id "nome" e salva na var "nome"
________nome = document.getElementById("nome").value;
________//pega o valor, dentro do "id = idade ", e salva na var "idade"
________idade = document.getElementById("idade").value;
___} => fecha a função
Veja o código na imagem abaixo:
Agora para exibir os dados na página, dentro da tag "body", adicione essas tags:
h2Seu nome é:/h2 p id="valorDigitadoNome"> /p
h2Sua idade é:/h2 p id="valorDigitadoNome"> /p
Veja como fica na página:
Seu nome é :
Sua idade é :
Veja o código na imagem abaixo:
Dentro da "função" que usamos para pegar os dados, vamos adicionar:
// vai pegar o valor da var "nome" e passar para o id "valorDigitadoNome"
document.getElementById("valorDigitadoNome").innerHTML = nome;
// pega o valor da var "idade" e passa para o id "valorDigitadoIdade"
document.getElementById("valorDigitadoIdade").innerHTML = idade;
Veja o código na imagem abaixo:
Só adicionar eles lá e já vai mostra na página o valor digitado pelo usuário na página.