Jc John Jc John - 3 months ago 11
Ajax Question

Ajax sending data from other php file contact form

I am new to AJAX, i came from a code in internet about sending Ajax to php file. The problem is i dont know if the data is submitted or what happen. The alert box doesn't pop up if it was submited

success: function () {
alert('form was submitted');
}


Here is the full form from html :

<form class="form-horizontal">
<div class="form-group">
<label for="contact-name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name" name="name" placeholder="FULL Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-sm-2 control-label">Message</label>
<div class="col-sm-4">
<textarea name="message" class="form-control" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary" type="submit" value="submit" >Send Message</button>
</div>
</div>
</form>


here is the script :

<script>
$(function () {

$('form').on('submit', function (e) {

e.preventDefault();

$.ajax({
type: 'post',
url: 'mail.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});

});

});
</script>


and because i dont know where the problem is, please check also my php code. thank you stackoverflow,good programmers.
php code :

<?php

$name = $_POST['name'];
$email_from = $_POST['email'];
$comments = $_POST['message'];

$email_to = "jcjohn@gmail.com";
$email_subject = "Message from John Web";
$email_message = "Form details below.\n\n";

function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}

$email_message .= "Name: ".clean_string($name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($email_to, $email_subject, $email_message, $headers);


echo "<script type='text/javascript'>alert('$message');</script>";
?>


am i doing right ? or maybe i was doing something that nothing goes.

Answer

Kindly Use ajaxForm Plugin and include jquery library.I think this will work fine for you.

<html> 
    <head> 
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
        <script src="http://malsup.github.com/jquery.form.js"></script> 

        <script> 
            // wait for the DOM to be loaded 
            $(document).ready(function() { 
                // bind 'myForm' and provide a simple callback function 
                $('#myForm').ajaxForm(function(data) { 
                    alert(data); 
                }); 
            }); 
        </script> 
    </head>
    <body>
    <form id="myForm" action="comment.php" method="post"> 
        <div class="form-group">
    <label for="contact-name" class="col-sm-2 control-label">Name</label>
     <div class="col-sm-3">
    <input type="text" class="form-control" id="name" name="name" placeholder="FULL Name" required>
     </div>
     </div>
     <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
   <div class="col-sm-4">
  <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
  </div>
  </div>
  <div class="form-group">
  <label for="contact-msg" class="col-sm-2 control-label">Message</label>
  <div class="col-sm-4">
  <textarea name="message" class="form-control" required></textarea>
    </div>
   </div>
   <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
  <button class="btn btn-primary" type="submit" value="submit" >Send Message</button>
   </div>
   </div>
    </form>
    </body>
    </html> 

and your PHP file code must be like this

<?php

    $name = $_POST['name']; 
    $email_from = $_POST['email']; 
    $comments = $_POST['message']; 

    $email_to = "jcjohn@gmail.com";
    $email_subject = "Message from John Web";
    $email_message = "Form details below.\n\n";

        function clean_string($string) {
          $bad = array("content-type","bcc:","to:","cc:","href");
          return str_replace($bad,"",$string);
        }

        $email_message .= "Name: ".clean_string($name)."\n";
        $email_message .= "Email: ".clean_string($email_from)."\n";
        $email_message .= "Comments: ".clean_string($comments)."\n";

        // create email headers
      $headers = 'From: '.$email_from."\r\n".
      'Reply-To: '.$email_from."\r\n" .
      'X-Mailer: PHP/' . phpversion();
       mail($email_to, $email_subject, $email_message, $headers);


        echo "Form Submitted";        
?>
Comments