Sending e-mail form using PHP and AJAX

Question

I have contact form on my site. It sends message to email. I try to do it without page reload using AJAX, but it seems that AJAX doesn't work: messages are sent but the page still redirecting to call-form.php. What is incorrect in my code? (jQuery is 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 = '[email protected]';
        $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 <[email protected]>\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's OK!");
          }
        });
      }); 
});

action="<?php bloginfo(template_url); ?>/mail/call-form.php" is useless if you done it in AJAX — Ɛɔıs3
– Ɛɔıs3, Commented May 27, 2015 at 21:04
You forgot some things, like the return of your ajax. I am writing an answer who works — Ɛɔıs3
– Ɛɔıs3, Commented May 27, 2015 at 21:12

Ɛɔıs3 · Accepted Answer · 2015-05-27 21:17:08Z

Ok, first when you make an AJAX call, you must have a way to know if your PHP returns you something (useful for debugging).

Then, when submitting a form with AJAX, the tag action="" is not needed.

Finally, to prevent a form from being sent when making an AJAX call, add e.preventDefault() with the event called e here, like 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's OK!");
    }).fail(function (data) {
        console.log(data);
    });
  }); 
});

And PHP :

if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
  $to = '[email protected]';
  $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 <[email protected]>\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 is the return of your AJAX call. It is better

Jay Blanchard · Accepted Answer · 2015-05-27 21:04:50Z

3

You're not preventing the default submit action -

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

answered May 27, 2015 at 21:04

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Comments

ecarrizo · Accepted Answer · 2015-05-27 21:29:13Z

3

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

Example with old .submit(), that now is an alias of .on('eventName'); and using return false to avoid form submission.;

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

Example 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's OK!");
      }
    });
});

From Jquery .submit() Documentation: This method is a shortcut for .on( "submit", handler ) in the first variation, > and .trigger( "submit" ) in the third.

Also, you would consider not using EVER the user input directly, it would not cause problems in this exact context (or maybe yes) but with your actual approach they can change the mail markup or adding some weirds things there, even scripts, you would consider escape, validate or limit it.

Also as zLen pointed out in the comments:

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

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

edited May 27, 2015 at 21:29

answered May 27, 2015 at 21:08

ecarrizo

2,80919 silver badges29 bronze badges

3 Comments

Maria Piaredryj Over a year ago

Please explain why you describe submit twice?

ecarrizo Over a year ago

Sure. In the first example i copied your exact same code and added return false statement; that should work. In my second example i use another way of binding the submit button, as pointed out in my comment that way you avoid Jquery calling on in the background. Also in the second example i use a different way to avoid form submission, i use e.preventDefault(); that avoid the default behavior 'submit' on the submit event.

Maria Piaredryj Over a year ago

Ah, I thought that it was not two different examples) Thanks!

squill25 · Accepted Answer · 2015-05-27 21:03:51Z

1

What is happening is your form is being submitted, it's not actually the AJAX call which is doing it. To fix it, add

return false;

at the end of the submit function so that the browser doesn't submit the form and the AJAX call happens properly.

answered May 27, 2015 at 21:03

squill25

1,1988 silver badges20 bronze badges

Collectives™ on Stack Overflow

Sending e-mail form using PHP and AJAX

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related