Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

geovani.cavalcante

Mostrar os dados inseridos em um formulário na mesma pagina.

Recommended Posts

Prezados, não tenho conhecimento em javascript e estou iniciando os estudos nessa linguagem. Queria pelo menos uma noção de como fazer com que os dados digitados em um formulário apareçam logo depois de clicar em enviar e na mesma página, tipo:

Seu nome: (nome digitado pelo usuário)

Endereço: (Endereço digitado pelo usuário)

 

Vlw!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você vai precisar criar um banco de dados, conecta-lo com a linguagem de programação que você utiliza e depois puxar essa informação com o select da linguagem sql (que é a linguagem do banco de dados). Você está conseguindo me estender ou você ainda não tem conhecimento dessas coisas que eu lhe falei? Caso não tenha entendido, você vai ter que aprender linguagem sql e uma linguagem de programação com php, python, java e etc.. Porque você vai precisar jogar um informação do formulário para o banco de dados e depois selecionar com o "select" a informação que você quer que apareça na página.

Agora, luiz14 disse:

Você vai precisar criar um banco de dados, conecta-lo com a linguagem de programação que você utiliza e depois puxar essa informação com o select da linguagem sql (que é a linguagem do banco de dados). Você está conseguindo me estender ou você ainda não tem conhecimento dessas coisas que eu lhe falei? Caso não tenha entendido, você vai ter que aprender linguagem sql e uma linguagem de programação com php, python, java e etc.. Porque você vai precisar jogar um informação do formulário para o banco de dados e depois selecionar com o "select" a informação que você quer que apareça na página.

*entender

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você 'enviou' de que forma?

Requisição via POST?

 

Outra duvida é ....

por que?

 

Você quer mater os dados na pagina por qual motivo? Validação? Persistência após validação?

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
59 minutos atrás, luiz14 disse:

Você vai precisar criar um banco de dados, conecta-lo com a linguagem de programação que você utiliza e depois puxar essa informação com o select da linguagem sql (que é a linguagem do banco de dados). Você está conseguindo me estender ou você ainda não tem conhecimento dessas coisas que eu lhe falei? Caso não tenha entendido, você vai ter que aprender linguagem sql e uma linguagem de programação com php, python, java e etc.. Porque você vai precisar jogar um informação do formulário para o banco de dados e depois selecionar com o "select" a informação que você quer que apareça na página.

*entender

Eu consigo entender sim, cara hahahah. Mas é o seguinte, isso é apenas um exercício e deve ser feito em javascript. Tenho um formulário bem basico e quando eu digitar alguma coisa nos campos ao clicar em enviar tem que aparecer as informações em baixo. Sem banco de dados.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Recomendo os exercícios:

https://github.com/gabrieldarezzo/helpjs-ravi

 

 

E os videos do Rodrigo Branas no Youtube (esta no link acima a referencia).

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
52 minutos atrás, gabrieldarezzo disse:

Você 'enviou' de que forma?

Requisição via POST?

 

Outra duvida é ....

por que?

 

Você quer mater os dados na pagina por qual motivo? Validação? Persistência após validação?

 

 

 

 

 

 

independe de método. é apenas um exercício básico e que deve ser feito em javascript.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na verdade o método influencia, no seu outro post você detalhou:

Citar

Tenho um formulário bem basico e quando eu digitar alguma coisa nos campos ao clicar em enviar tem que aparecer as informações em baixo.

 

Abstraindo o detalhamento e focando nas palavras chave:

'formulário'
'Digitar campos'
'ao clicar'
'aparecer as informações em baixo'

 

Temos um fluxo ....

 

Então basicamente você vai precisar de campos textos HTML 

https://www.w3schools.com/tags/tag_input.asp

 

Um Botão, ex:

<button>Botão Legal</button>

E entender sobre eventos no JS. (Evento click)

 

 

Tudo isso é explicado no link q eu te enviei, 

 

Bons estudos ;)

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
12 minutos atrás, geovani.cavalcante disse:

Eu consigo entender sim, cara hahahah. Mas é o seguinte, isso é apenas um exercício e deve ser feito em javascript. Tenho um formulário bem basico e quando eu digitar alguma coisa nos campos ao clicar em enviar tem que aparecer as informações em baixo. Sem banco de dados.

Ahh ok, rsrs. Você pode fazer isso com cookie também, mas ele tem um tempo de duração e se você limpar os cookies no navegador, ele sai.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo outra dica é da uma olhada nessa função:

 

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

 

Provavelmente você 'mata' o exercício com ela, de qualquer forma recomendo fazer a lista.

 

Agora se a ideia é popular valores em outro campo texto, nesse caso você vai precisar manipular o atributo 'value' do elemento HTML com algum identificador... 

 

Falei grego?

 

Olha só um elemento do tipo texto (type="text") com atributo id="camponome"   HTML: 

<input type="text" id="camponome">

Spoiler: A gente não ve... mas tem um campo escondidinho ali chamado value="" (em branco) 

 

 

Ai no JavaScript só falar pra ele assim: Ao clicar no botão X fazer Y ....

 

 

No caso o Y poderia ser algo como:

document.getElementById('camponome').value = "Gabriel Darezzo";

Que transformaria nosso amiguinho HTML nisso:

<input type="text" id="camponome" value="Gabriel Darezzo">

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui fazer da seguinte maneira:

function myfunction(){
        n = document.getElementById("nome").value;
        document.getElementById("pnome").innerHTML = "Nome: " + n;
}

O html ficou assim: 

<body>
<form>
	<p><label for="nome"> Digite Nome: </label>
	<input type="text" id="nome"></p>
  
	<button type="button" onclick="myfunction()">Envair</button>
</form>

<p id="pnome"></p>
</body>

Deu tudo certo até chegar na parte dos checkbox. Tenho três opções pra marcar mas não consigo fazer com que as opções marcadas apareçam no parágrafo ao clicar em Enviar.

 

<p> Turnos de Trabalho:</p>
	<p>
	<input type="checkbox" name="turno" id="m" />		
	<label class="manha" for="m"> manhã </label>
	</p>			
	
	<p>			
	<input type="checkbox" name="turno" id="t" />		
	<label  class="tarde" for="t"> tarde </label>
	</p>
				
	<p>			
	<input type="checkbox" name="turno" id="n" />		
	<label class="noite" for="n"> noite </label>
	</p>

Consegui fazer com o campo de Sexo com input radio com o seguinte código:

sx = document.querySelectorAll('input[type=radio]:checked')[0].value;
		document.getElementById("psexo").innerHTML = "Sexo: " + sx;

porém com checkbox não dá certo. alguma sugestão?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.