Clever Geek Handbook

Submitting an email form using PHP and AJAX

I have a contact form on my site. He sends an email message. I'm trying to do this without reloading the page using AJAX, but it seems like AJAX is not working: messages are sent but the page is still being redirected to call-form.php

. What's wrong in my code? (jQuery included)

Html

<form name="freeCall" action="<?php bloginfo(template_url); ?>/mail/call-form.php" method="post" class="popover-form" id="free-call-form">  
    <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
    <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
    <input type="submit" value="Call me back" >       
</form>

PHP - call-form.php

<?
if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
        $to = 'test@gmail.com';
        $subject = 'Callback';
        $message = '
                <html>
                    <head>
                        <title>Call me back</title>
                    </head>
                    <body>
                        <p><b>Name:</b> '.$_POST['call-name'].'</p>
                        <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
                    </body>
                </html>'; 
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
        $headers .= "From: Site <info@mail.com>\r\n"; 
        mail($to, $subject, $message, $headers); 
}
?>

Js

$(function () {    
      $("#free-call-form").submit(function () { 
        var form_data = $(this).serialize(); 
        $.ajax({
          type: "POST", 
          url: "call-form.php", 
          data: form_data,
          success: function () {
            alert("It OK!");
          }
        });
      }); 
});
+3


source to share


4 answers


Okay, first, when you make an AJAX call, you should have a way to know that your PHP is returning something (useful for debugging) to you.

Then, when submitting the form with AJAX, the tag is action=""

not needed.

Finally, to prevent the form from being submitted when making an AJAX call, add e.preventDefault()

with a named event e

here as in my example.

I have improved your code to be more realistic about the latest standards.

HTML:

<form name="freeCall" method="post" class="popover-form" id="free-call-form">  
  <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
  <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
  <input type="submit" value="Call me back" >


JS:

$(function () {    
  $("#free-call-form").submit(function (e) {
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
      type: "POST", 
      url: "call-form.php",
      dataType: "json", // Add datatype
      data: form_data
    }).done(function (data) {
        console.log(data);
        alert("It OK!");
    }).fail(function (data) {
        console.log(data);
    });
  }); 
});

And PHP:

if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
  $to = 'test@gmail.com';
  $subject = 'Callback';
  $message = '
        <html>
            <head>
                <title>Call me back</title>
            </head>
            <body>
                <p><b>Name:</b> '.$_POST['call-name'].'</p>
                <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
            </body>
        </html>'; 
  $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
$headers .= "From: Site <info@mail.com>\r\n"; 
mail($to, $subject, $message, $headers);

  echo json_encode(array('status' => 'success'));
} else {
  echo json_encode(array('status' => 'error'));
}

With echo json_encode

you know what the return of your AJAX call is. It's better

+5


source


You are not precluding the default submit action -



$("#free-call-form").submit(function (event) { // capture the event
    event.preventDefault();  // prevent the event default action
+4


source


Returning false or preventing the default event behavior should work for you.

An example with the old .submit (), which is now an alias for .on ('eventName'); and using return false to avoid submitting the form.

 $("#free-call-form").submit(function () { 
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It OK!");
      }
    });
    return false;
});

An example of using .on ('eventName') and using e.preventDefault () to avoid form submission.

$("#free-call-form").on('submit', function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It OK!");
      }
    });
});

From the jQuery.submit () documentation: This method is a shortcut to .on ("submit", handler) in the first option,> and. trigger ("submit") in the third.

Also, you think that you are not using EVER user input directly, it won't cause problems in this exact context (or maybe yes), but with your actual approach they might change the markup of the mail or add some weird stuff in there, even scripts you would consider escaping, confirm or restrict it.

Also as zLen pointed out in the comments:

the action in the markup of the form is not required because you are not using it, you can remove it:

action="<?php bloginfo(template_url); ?>/mail/call-form.php"
+2


source


What happens is your form is submitting, it is not an AJAX call that does this. To fix this add

return false;

at the end of the function submit

to prevent the browser from submitting the form and the AJAX call is correct.

+1


source






More articles:


All Articles