Ir para conteúdo
luannsr12

Gravar dados no banco de dados com Ajax sem refresh ná página

Recommended Posts

Olá meus  Jovens, trazendo um tópico aqui pra quem quer criar um formulário para contato quando para cadastro de usuário ou outra coisa sem atualizar a página!

 

 

Primeiramente Vamos criar nosso formulário 

<form id="envia_msg" action="" method="POST">
     <input type="text" name="nome" placeholder="Nome..." required>
     <br />
	 <input type="text" name="email" placeholder="E-mail..." required>
     <br>
	 <textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
	 <br />
     <button type="submit" >Enviar</button>
</form>
<p id="resultado"></p>

Dei o id para o form e deixei a ação em branco  usando o method POST .. Muito importante essas configurações.

Vocês devem ter reparado o paragrafo em baixo do Form, este paragrafo é aonde ira aparecer a mensagem para o usuário caso ocorra tudo certo, e ele também recebeu um id.

 

Agora vamos incluir o Jquery em nossa página, sem ele não funciona, vai por mim!!!

<script type="text/javascript" href="https://code.jquery.com/jquery-3.2.1.min.js" ></script>

Agora vamos pro Javascript, o javascript vai ter a função de enviar os dados e mostrar a mensagem!



$(function(){

	$('#envia_msg').submit(function(event){
		event.preventDefault();
		var formDados = new FormData($(this)[0]);

		$.ajax({
			url:'envia_msg.php',
			type:'POST',
			data:formDados,
			cache:false,
			contentType:false,
			processData:false,
			success:function (data)
     {document.getElementById('resultado').innerHTML = 'Enviado! Em breve Entraremos em contato.';
			  $('#envia_msg').each (function(){
			this.reset();
           });
	  },
			dataType:'html'
		});
		return false;
	});
});

Então apos o formulario que tem o id envia_msg  for submetido ele cria uma função event  que pega os dados do formulario, e passa para o $.ajax enviar os dados para a página envia_msg.php que ainda vamos criar, apos enviado o success entra em ação criando uma niva function, que mostra a mensagem "Enviado! Em breve entraremos em contato."... e Pronto dados enviado sem atualizar a página!

 

--- A Parte "dificil foi feita" -- 

Agora vamos tratar com carinho os dados enviado para a página envia_msg.php

vamos recebe-los e inserir no banco de dados.

isso com , a linguagem mais top de todas!! PHP kkk

<?php 
$host  = "localhost";
$user  = "root";
$senha = "";
$db    = "tabela";

$conn  =  mysqli_connect($host, $user, $senha, $db);

$nome  = $_POST['nome'];
$email = $_POST['email'];
$msg   = $_POST['msg'];

$sql = "INSERT INTO `contato` (`nome`,`email`,`msg`) VALUES ('{$nome}','{$email}','{$msg}')";

$conn->query($sql);
?>

E PRONTO CABOUUU!! VAALLEEUUU

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só um pequeno "reparo". Se estás a usar jQuery, porque não substituir 

document.getElementById('resultado').innerHTML = '...'

por

$('#resultado').html('...');

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 03/07/2017 at 08:17, wootzor disse:

Só um pequeno "reparo". Se estás a usar jQuery, porque não substituir 


document.getElementById('resultado').innerHTML = '...'

por


$('#resultado').html('...');

 

Boa Ideia :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 02/11/2018 at 15:56, Dr. Programador disse:

Explicação muito confusa.

Pegou o código pronto de algum lugar e não organizou!

 :thumbsdown:

Pelo contrário, eu fiz o código, mas peço desculpas, se não consegui explicar corretamente

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dentre essas e outras eu criei essa aplicação que usa Javascript nativo e CSS

https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

<form id="envia_msg" onsubmit="return ajax.form('envia_msg', 'resultado', 'envia_msg.php')">
     <input type="text" name="nome" placeholder="Nome..." required>
     <br />
	 <input type="text" name="email" placeholder="E-mail..." required>
     <br>
	 <textarea name="msg" placeholder="Sua Mensagem..." required></textarea>
	 <br />
     <button type="submit" >Enviar</button>
</form>
<p id="resultado"></p>

<script>
  var ajax = new AjaxRequest();
  /*
  Metodo: form(form, div, file)
  form('ID do formulário', 'ID do elemento que mostra o resultado', 'arquivo que será enviado os dados')
  */
</script>

Enfim, bem melhor que usar jquery.....

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por patriciahelena
      Boa noite,
       
      Preciso de ajuda.
      No arquivo form.php tenho 3 inputs de entrada(valor1, valor2, valor3) e 3 inputs(disabled) que receberão os valores calculados do arquivo form_matematico5.php.
      Na tag form onsubmit="return calcula()"
       
          <h4 class="calcula"></h4>
       
      <script>
      function calcula($volmedio, $temp, $precogas) {
      $.get("form_matematico5.php", $('#calculorecovap').serialize(),
          function(data){
              $('.calcula').html(data);
          }
      );
      return false;
      }
      </script>
       
       
      No arquivo form_matecatico5.php é feito os calculos gerando 3 valores. 
      Tenho um echo:
      echo 'texto<br><div style=font-size:23px;color:red;>' . number_format($Resultado1,0,",","."). '</div> <br> texto<br><div style=font-size:23px;color:red;>'. number_format($Resultado2,0,",","."). '</div> <br>texto<br><div style=font-size:23px;color:red;>R$ '. number_format($Resultado3,2,",","."). '</div>';
       
      Ele retorna o echo certinho em     <h4 class="calcula"></h4>.
      Mas o que eu quero mesmo é que Resultado1 retorne dentro do primeiro input(disabled), o Resultado2 dento do segundo input(disabled) e assim com o terceiro. Ou seja,
      Cada input(disabled), recebera um valor diferente e não o total de .calcula.
       
      Espero ter explicado direitinho,
      Obrigada
       
       
       
       
       
       
       
    • Por Claudia França
      Pessoal escrevi o código,  (  <style id=”antiClickjack”>body{display:important;}</style>
      <script type=”text/javascript”>
      if (self === top) {
      var antiClickjack = document.getElementById(“antiClickjack”);
      antiClickjack.parentNode.removeChild(antiClickjack);
      } else {
      top.location = self.location;
      }
      </script> ) em um site o head por exigência da empresa de cartão, mas tenho percebido que com um tempo o site para de acionar o java script para carregar outra pagina.  Isso aconteceu depois desse código. Eu tenho que escrever algo no corpo no site para isso nao mais acontecer e deixar o anticlick habilitado. ?
    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
    • Por igoraraujowd
      Pessoal,
       
      Estou trabalhando em um teste A/B e preciso fazer uma modificação no código do menu. Estou utilizando o Mega Site Menu e preciso que o site fique sempre com o hamburger menu ainda que em desktop.
      https://codyhouse.co/gem/css-mega-site-navigation
       
      Pra fazer isso, eu precisaria fazer 2 alterações no código abaixo:
      https://ghostbin.com/paste/fjy3t
      1 - Alterar o valor da variável MqL
      2 - Anular as linhas abaixo na função moveNavigation:
      //navigation.insertBefore('.menu--mobile-header-cta'); //$('.nav-overlay').removeClass('is-visible'); A questão é que eu não posso fazer essas alterações diretamente no código e precisaria inserir algo em tags <script> que sobscrevesse a função e alterasse os pontos acima. É possível?
    • Por clickanapolis
      Pessoal peguei esse codigo de auto somar valor com quantidade na internet e não estou conseguindo ajustar ele.
       
      Ate que no total eu consegui incluir 2 casas decimais.
       
      Mais no subtotal não, e alem disso gostaria de colocar ele com extensão em moeda real o valor tipo:
       
      1500 para 1.500,00
       
      como eu faria:
       
      <script type="text/javascript"> $(window).load(function(){ function id( el ){ //return document.getElementById( el ); return $( el ); } function calcTotal( un01, qnt01 ) { return un01 * qnt01; } function getElementParent(event){ return event.srcElement.parentNode.parentNode.getAttribute('id'); } function getValorUnitario(elParent){ return $('#'+elParent+' .class_unit input').val(); } function getQuantidade(elParent){ return $('#'+elParent+' .class_quant input').val(); } function setFieldTotal(elParent, valueUnit, valueQuant){ id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant)); setTotalFinal(); } function setTotalFinal(){ var total = 0; $('#table-shop tr .class_total input').each(function(){ if(this.value != ''){ var valor = this.value; total += parseFloat(valor); } }); $('#total .value_total').html(total.toFixed(2)); $('#total .value_total').val(total.toFixed(2)); } $(document).ready(function(){ id('#table-shop tr .class_unit').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); id('#table-shop tr .class_quant').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); }); }); </script>  
×

Informação importante

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