javascript - Sending e-mail form using PHP and AJAX

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); 
}
?>

$(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!");
          }
        });
      }); 
});

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); 
}
?>

$(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!");
          }
        });
      }); 
});

Share Improve this question asked May 27, 2015 at 21:00 Maria Piaredryj 1,6623 gold badges18 silver badges37 bronze badges

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

Add a comment |

4 Answers 4

Sorted by: Reset to default 7

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

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

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"

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Sending e-mail form using PHP and AJAX - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)