Ajax sending data from other php file contact form

Question

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 1

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";        
?>

Ajax sending data from other php file contact form

Question

1 answers

solution1
0 ACCPTED 2016-08-27 12:33:38

Ajax sending data from other php file contact form

Question

1 answers

solution1 0 ACCPTED 2016-08-27 12:33:38

solution1
0 ACCPTED 2016-08-27 12:33:38