0

Estou passando dados de formulário via Ajax, e gostaria que o retorno fosse exibido na minha página html na <div id=resposta></div>, na página original do formulário, porém por algum motivo o retorno sempre é exibido na página PHP, já tentei fazer diversas alterações sem sucesso.

O formulário html:

<form id="contactForm" method="post" action="php/form-process.php">
<input type="text" class="form-control" id="name" name="name" placeholder="Preencha seu nome" required data-error="Preencha o Nome">
<input type="text" id="email" class="form-control" name="email" placeholder="Preencha seu e-mail" required data-error="Preencha o E-mail">
<input type="text" id="phone" class="form-control" name="phone" placeholder="Preencha um telefone para contato" required data-error="Preencha um telefone para Contato">
Tipo de Conta:
    <label><input type="radio" name="account" id="pessoal">Pessoal</label>
    <label><input type="radio" name="account" id="profissional">Profissional</label>
<textarea class="form-control" id="message" name="message" placeholder="Sua Mensagem" rows="8" data-error="Escreva sua Mensagem" required></textarea>
<button class="btn btn-common" id="submit" type="submit">Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div> 
<div id="resp"></div>

O Código Jquery:

$('#contactform').submit(function(e) {
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var phone = $('input[name="phone"]').val();
var account = $('input[name="account"]').val();
var message = $('textarea[name="message"]').val();
$.ajax({
    url: 'php/form-process.php', // caminho para o script que vai processar os dados
    async: false,
    type: 'POST',
    data: {
        name: name, 
        email: email, 
        phone: phone, 
        account: account, 
        message: message
        },
    dataType: 'html',
    success: function(response) {
        $('#resp').html(response);
    },
    error: function(xhr, status, error) {
        alert(xhr.responseText);
    }
});
return false;

});

O PhP:

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$account = $_POST['account'];
$message = $_POST['message'];


$response = "";
$response .= "<div class=\"success\" id=\"resp\">";
$response .= "    <a href=\"#\" class=\"close\"  aria-label=\"close\">&times;</a>";
$response .= "<strong>  Enviado com sucesso! </strong>";
$response .= "</div>";          

echo($response);

?>

Já tentei tirar o action do form, mas não deu certo. Tentei também colocar o async no Jquery e não funcionou, estou realmente quebrando a cabeça.

1 Resposta 1

2

Considere adicionar um e.preventDefault(); ao invés do return false e também colocá-lo em primeira instância
No seu html, você não estava fechando a tag <form>.

Além disso, o ID do seu form <form id="contactForm" ... é diferente do ID usado no jquery $('#contactform'). Sim, letras maiúsculas fazem diferença.

Desta maneira me parece funcional, e é da forma que utilizo em meus projetos:

$('#contactForm').submit(function(e) {
  e.preventDefault();
  var name = $('input[name="name"]').val();
  var email = $('input[name="email"]').val();
  var phone = $('input[name="phone"]').val();
  var account = $('input[name="account"]').val();
  var message = $('textarea[name="message"]').val();
  $.ajax({
      url: 'php/form-process.php',
      type: 'POST',
      data: {
          name: name, 
          email: email, 
          phone: phone, 
          account: account, 
          message: message
          },
      dataType: 'html',
      success: function(response) {
          $('#resp').html(response);
      },
      error: function(xhr, status, error) {
          alert(xhr.responseText);
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contactForm" method="post" action="">
  <input type="text" class="form-control" id="name" name="name" placeholder="Preencha seu nome" required data-error="Preencha o Nome">
  <input type="text" id="email" class="form-control" name="email" placeholder="Preencha seu e-mail" required data-error="Preencha o E-mail">
  <input type="text" id="phone" class="form-control" name="phone" placeholder="Preencha um telefone para contato" required data-error="Preencha um telefone para Contato">
  Tipo de Conta:
      <label><input type="radio" name="account" id="pessoal">Pessoal</label>
      <label><input type="radio" name="account" id="profissional">Profissional</label>
  <textarea class="form-control" id="message" name="message" placeholder="Sua Mensagem" rows="8" data-error="Escreva sua Mensagem" required></textarea>
  <button class="btn btn-common" id="submit" type="submit">Send Message</button>
</form>
<div id="msgSubmit" class="h3 text-center hidden"></div> 
<div id="resp"></div>

2
  • 1
    Sobre o e.prevent já tinha tentado utilizar com ele. O erro era mesmo o f minúsculo. Incrível como a gente olha o código N vezes e não acha o erro e as vezes precisa de uma ajuda externa. Mt obrigado, e também pela forma didática de abordagem da resposta.
    – lipitos
    13/07/2018 às 15:58
  • Nada! Erro comum esse, daqueles que chegam a dar raiva pois tudo parece certo kk. Bons projetos! 13/07/2018 às 16:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .