Ajuda! Como colocar pra capturar os inputs do formulário e mostrar na própria pagina as informações inseridas em Javascript mais simples possível

09/04/2020

19

Ajuda! Como colocar pra capturar os inputs do formulário e mostrar na própria pagina as informações inseridas em Javascript mais simples possível.
Tô fazendo um trabalho pra faculdade, já fiz a página quase 100%, mas ta faltando a parte do código que capta as informações do usuário pra que sejam mostradas na própria pagina, como o nome, CPF, data de nascimento. Já tentei vários videos do youtube pesquisar na internet, mas estou tendo muita dificuldade em resolver. Tenho que entregar esse trabalho hoje, por favor quem puder me ajudar, serei muito grato. To varando a noite estudando e tentando entender isso e nada de conseguir.

segue o código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Smart Form</title>
<link rel="icon" href="/formularioofc/img/favicon-32x32.png" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<script type="text/javascript" src="js/pag.js"></script>
<script language="JavaScript" src="/index.js"></script>
</head>
<body>
<img class="wave" src="/formularioofc/img/wave.png">
<div class="container">
<div class="img">
<img src="/formularioofc/img/undraw.svg">
</div>

<!--<h2>Smart Form</h2>-->

<img class="logo" src="/formularioofc/img/logo-via-logohub.png">
<h3>Seu formulário inteligente</h3>

<form>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

<h1>PREENCHA O FORMULÁRIO DE INSCRIÇÃO</h1>
<br>

<div class="atributos1">

<p class="nome_completo">
Nome:
<i class="fas fa-user"></i>
<br><input type="text" name="nome" id="nome_completo" placeholder="Digite seu nome completo" <!--required-->>

</p>
<p class="cpf">
CPF:
<i class="fas fa-address-card"></i>
<br><input type="text" name="CPF" maxlength="14" placeholder="Por exemplo: 000.000.000-00" <!--required>-->>

</p>


<p class="data">
Data de Nascimento:
<i class="fas fa-calendar-day"></i>
<br><input type="date" name="data" <!--required>-->>

</p>

<p class="senha">
Senha:
<i class="fas fa-lock"></i>
<br><input type="password" name="senha" maxlength="8" id="senha" placeholder="Senha" <!--required>-->>

<button type="button"onclick="mostrarSenha()">Mostrar</button>
</p>

</div>

<p class="sexo">
<div class="form-group">
<label for="sexo">Sexo:</label>
<select class="form-control form-control-sm" >

<option><h3>Selecione</h3></option>
<option>Masculino</option>
<option>Feminino</option>
<option>Prefiro não informar</option>
</select>
</div>

</p>

<p class="enviar">
<button type="submit" onclick="getValue()">Enviar</button>
<p id="send"></p>
<button type="reset" name="limpa" value="Limpar">Limpar</button>
</html>
Responder

Post mais votado

12/04/2020

Ajuda! Como colocar pra capturar os inputs do formulário e mostrar na própria pagina as informações inseridas em Javascript mais simples possível.
Tô fazendo um trabalho pra faculdade, já fiz a página quase 100%, mas ta faltando a parte do código que capta as informações do usuário pra que sejam mostradas na própria pagina, como o nome, CPF, data de nascimento. Já tentei vários videos do youtube pesquisar na internet, mas estou tendo muita dificuldade em resolver. Tenho que entregar esse trabalho hoje, por favor quem puder me ajudar, serei muito grato. To varando a noite estudando e tentando entender isso e nada de conseguir.

segue o código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Smart Form</title>
<link rel="icon" href="/formularioofc/img/favicon-32x32.png" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<script type="text/javascript" src="js/pag.js"></script>
<script language="JavaScript" src="/index.js"></script>
</head>
<body>
<img class="wave" src="/formularioofc/img/wave.png">
<div class="container">
<div class="img">
<img src="/formularioofc/img/undraw.svg">
</div>

<!--<h2>Smart Form</h2>-->

<img class="logo" src="/formularioofc/img/logo-via-logohub.png">
<h3>Seu formulário inteligente</h3>

<form>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

<h1>PREENCHA O FORMULÁRIO DE INSCRIÇÃO</h1>
<br>

<div class="atributos1">

<p class="nome_completo">
Nome:
<i class="fas fa-user"></i>
<br><input type="text" name="nome" id="nome_completo" placeholder="Digite seu nome completo" <!--required-->>

</p>
<p class="cpf">
CPF:
<i class="fas fa-address-card"></i>
<br><input type="text" name="CPF" maxlength="14" placeholder="Por exemplo: 000.000.000-00" <!--required>-->>

</p>


<p class="data">
Data de Nascimento:
<i class="fas fa-calendar-day"></i>
<br><input type="date" name="data" <!--required>-->>

</p>

<p class="senha">
Senha:
<i class="fas fa-lock"></i>
<br><input type="password" name="senha" maxlength="8" id="senha" placeholder="Senha" <!--required>-->>

<button type="button"onclick="mostrarSenha()">Mostrar</button>
</p>

</div>

<p class="sexo">
<div class="form-group">
<label for="sexo">Sexo:</label>
<select class="form-control form-control-sm" >

<option><h3>Selecione</h3></option>
<option>Masculino</option>
<option>Feminino</option>
<option>Prefiro não informar</option>
</select>
</div>

</p>

<p class="enviar">
<button type="submit" onclick="getValue()">Enviar</button>
<p id="send"></p>
<button type="reset" name="limpa" value="Limpar">Limpar</button>
</html>


Fala Roberto beleza?

Man não se isso vai te ajudar pois se prazo já passou, mas a maneira mais simples possível de fazer isso seria utilizando a biblioteca Jquery.

Você teria que entrar no site da biblioteca e baixar o arquivo .js para colocar em sem projeto ou utilizar algum CDN.

E no final da sua página você teria de colocar uma tag script criando a função que você chama na submit a getValues().

Algo assim:

<script>
function getValues(){
// Dentro da getValues você teria de pegar os dados através de seletores com o Jquery é bem simples.
// Este é um exemplo de seletor: $("#iddoseucampo").val(); Com isso você pega o valor do campo em questão e pode alterar o valor dele também.
// Por exeplo $("#iddocampo1").val($("iddocampo2").val()); Atribuiria o valor do campo 2 para o campo 1. No seu caso do formulário seria algo assim:

let nome = $("#nome_completo").val();
//Os seletores funcionam por id quando você utiliza o # portanto lembre-se de colocar id em todos os seus campos, nesse exemplo não seria possível pegar os dados abaixo, pois eles não tem a propriedade id.
//Existem outras formas de buscar elementos como classe, atributos e estados, mas sempre de preferencia ao id, pois o mesmo deve sempre ser unico na página.
let cpf = $("#cpf").val();
let dtnasc = $("#datanascimento").val();
let senha = $("#senha").val();
let sexo = $("#sexo").val();

//E pronto agora você já tem todos os seus dados em váriaveis javascript, e você pode escrever os valores delas em qualquer lugar.
//Por exemplo dentro de uma div
$("#divresultado").html(nome + " - " + cpf);
//lançar um alerta para o usuário
alert(nome + " - " + cpf);
//Imprimir no console do navegar(F12)
console.log(nome + " - " + cpf);
}
</script>

Enfim espero ter ajudado de alguma forma;
Grande abraço.
Responder

Mais Posts

12/04/2020

Roberto

Ajuda! Como colocar pra capturar os inputs do formulário e mostrar na própria pagina as informações inseridas em Javascript mais simples possível.
Tô fazendo um trabalho pra faculdade, já fiz a página quase 100%, mas ta faltando a parte do código que capta as informações do usuário pra que sejam mostradas na própria pagina, como o nome, CPF, data de nascimento. Já tentei vários videos do youtube pesquisar na internet, mas estou tendo muita dificuldade em resolver. Tenho que entregar esse trabalho hoje, por favor quem puder me ajudar, serei muito grato. To varando a noite estudando e tentando entender isso e nada de conseguir.

segue o código HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Smart Form</title>
<link rel="icon" href="/formularioofc/img/favicon-32x32.png" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<script type="text/javascript" src="js/pag.js"></script>
<script language="JavaScript" src="/index.js"></script>
</head>
<body>
<img class="wave" src="/formularioofc/img/wave.png">
<div class="container">
<div class="img">
<img src="/formularioofc/img/undraw.svg">
</div>

<!--<h2>Smart Form</h2>-->

<img class="logo" src="/formularioofc/img/logo-via-logohub.png">
<h3>Seu formulário inteligente</h3>

<form>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

<h1>PREENCHA O FORMULÁRIO DE INSCRIÇÃO</h1>
<br>

<div class="atributos1">

<p class="nome_completo">
Nome:
<i class="fas fa-user"></i>
<br><input type="text" name="nome" id="nome_completo" placeholder="Digite seu nome completo" <!--required-->>

</p>
<p class="cpf">
CPF:
<i class="fas fa-address-card"></i>
<br><input type="text" name="CPF" maxlength="14" placeholder="Por exemplo: 000.000.000-00" <!--required>-->>

</p>


<p class="data">
Data de Nascimento:
<i class="fas fa-calendar-day"></i>
<br><input type="date" name="data" <!--required>-->>

</p>

<p class="senha">
Senha:
<i class="fas fa-lock"></i>
<br><input type="password" name="senha" maxlength="8" id="senha" placeholder="Senha" <!--required>-->>

<button type="button"onclick="mostrarSenha()">Mostrar</button>
</p>

</div>

<p class="sexo">
<div class="form-group">
<label for="sexo">Sexo:</label>
<select class="form-control form-control-sm" >

<option><h3>Selecione</h3></option>
<option>Masculino</option>
<option>Feminino</option>
<option>Prefiro não informar</option>
</select>
</div>

</p>

<p class="enviar">
<button type="submit" onclick="getValue()">Enviar</button>
<p id="send"></p>
<button type="reset" name="limpa" value="Limpar">Limpar</button>
</html>


Fala Roberto beleza?

Man não se isso vai te ajudar pois se prazo já passou, mas a maneira mais simples possível de fazer isso seria utilizando a biblioteca Jquery.

Você teria que entrar no site da biblioteca e baixar o arquivo .js para colocar em sem projeto ou utilizar algum CDN.

E no final da sua página você teria de colocar uma tag script criando a função que você chama na submit a getValues().

Algo assim:

<script>
function getValues(){
// Dentro da getValues você teria de pegar os dados através de seletores com o Jquery é bem simples.
// Este é um exemplo de seletor: $("#iddoseucampo").val(); Com isso você pega o valor do campo em questão e pode alterar o valor dele também.
// Por exeplo $("#iddocampo1").val($("iddocampo2").val()); Atribuiria o valor do campo 2 para o campo 1. No seu caso do formulário seria algo assim:

let nome = $("#nome_completo").val();
//Os seletores funcionam por id quando você utiliza o # portanto lembre-se de colocar id em todos os seus campos, nesse exemplo não seria possível pegar os dados abaixo, pois eles não tem a propriedade id.
//Existem outras formas de buscar elementos como classe, atributos e estados, mas sempre de preferencia ao id, pois o mesmo deve sempre ser unico na página.
let cpf = $("#cpf").val();
let dtnasc = $("#datanascimento").val();
let senha = $("#senha").val();
let sexo = $("#sexo").val();

//E pronto agora você já tem todos os seus dados em váriaveis javascript, e você pode escrever os valores delas em qualquer lugar.
//Por exemplo dentro de uma div
$("#divresultado").html(nome + " - " + cpf);
//lançar um alerta para o usuário
alert(nome + " - " + cpf);
//Imprimir no console do navegar(F12)
console.log(nome + " - " + cpf);
}
</script>

Enfim espero ter ajudado de alguma forma;
Grande abraço.
Responder

12/04/2020

Roberto


Fala Roberto beleza?

Man não se isso vai te ajudar pois se prazo já passou, mas a maneira mais simples possível de fazer isso seria utilizando a biblioteca Jquery.

Você teria que entrar no site da biblioteca e baixar o arquivo .js para colocar em sem projeto ou utilizar algum CDN.

E no final da sua página você teria de colocar uma tag script criando a função que você chama na submit a getValues().

Algo assim:

<script>
function getValues(){
// Dentro da getValues você teria de pegar os dados através de seletores com o Jquery é bem simples.
// Este é um exemplo de seletor: $("#iddoseucampo").val(); Com isso você pega o valor do campo em questão e pode alterar o valor dele também.
// Por exeplo $("#iddocampo1").val($("iddocampo2").val()); Atribuiria o valor do campo 2 para o campo 1. No seu caso do formulário seria algo assim:

let nome = $("#nome_completo").val();
//Os seletores funcionam por id quando você utiliza o # portanto lembre-se de colocar id em todos os seus campos, nesse exemplo não seria possível pegar os dados abaixo, pois eles não tem a propriedade id.
//Existem outras formas de buscar elementos como classe, atributos e estados, mas sempre de preferencia ao id, pois o mesmo deve sempre ser unico na página.
let cpf = $("#cpf").val();
let dtnasc = $("#datanascimento").val();
let senha = $("#senha").val();
let sexo = $("#sexo").val();

//E pronto agora você já tem todos os seus dados em váriaveis javascript, e você pode escrever os valores delas em qualquer lugar.
//Por exemplo dentro de uma div
$("#divresultado").html(nome + " - " + cpf);
//lançar um alerta para o usuário
alert(nome + " - " + cpf);
//Imprimir no console do navegar(F12)
console.log(nome + " - " + cpf);
}
</script>

Enfim espero ter ajudado de alguma forma;
Grande abraço.

--------------------------------------------------
Obrigado campeão pela ajuda. O prazo de entrega já passou, mas não tem problema o importante é o aprendizado. Vou tentar fazer isso que você falou. De qualquer forma muito obrigado pela ajuda.
Responder

16/04/2020

Vinicius

Olá!

a maneira mais simples possível que conheço com JS Puro é:

https://codepen.io/vczb/pen/QWjNwRY?editors=1010

espero que ajude.

Abraço
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar