Problem with return message in form with Ajax

Navigation
0

I am passing form data via Ajax, and would like the return to be displayed on my html page on <div id=resposta></div> , on the original page of the form, however for some reason the return is always displayed on the PHP page, I have already tried to do several unsuccessful changes.

The html form: 

<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>

The Jquery Code: 

$('#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;

});

The 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);

?>

I've tried to take action from the form, but it did not work. I tried also to put the async in Jquery and it did not work, I'm really breaking the head.

    
asked by anonymous 13.07.2018 / 17:18

1 answer

2

Consider adding a e.preventDefault(); instead of the return false and also putting it in the first instance
In your html, you were not closing the <form> tag.

In addition, the ID of your form <form id="contactForm" ... is different from the ID used in jquery $('#contactform') strong>. Yes, capital letters make a difference.

In this way it seems functional, and it's the way I use it in my projects: 

$('#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><formid="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>
    
13.07.2018 / 17:32
When making a ajax request, are there problems if I reload the page immediately? How to perform calculations on top of a CSV file with Python 2.7?