Saud Kazia
Saud Kazia

Reputation: 192

Unable to send email from ajax contact form

I am basically editing/joining a few scripts to make a slideout contact form. The slide out is working. Form elements have been defined and sendmail php I think is also correct but for some reason I am not able to send the email. The jquery sending mail check function shows error - Error.

File structure

contact_me.php
feedback/process_email.php
feedback/core.js

HTML

<html>
<head>
    <title>
        Feedback Form Demo
    </title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="feedback/core.css">
    <link rel="stylesheet" href="styles/bootstrap.min.css">

    <script src="feedback/core.js"></script>

</head>
<body>


    <div class="feedback">
    <a id="feedback_button">Enquiry</a>

    <div class="form">
    <h3>Please Send Us Your Enquiry</h3>
        <span class="status"></span>
        <ul class="feedb">
        <li class="col-lg-12"><label class="col-lg-3" for="fname">Name</label><input class="col-lg-9" type="text" name="fname" id="fname" value=""></li>
        <li class="col-lg-12"><label class="col-lg-3" for="femail">Email</label><input class="col-lg-9" type="text" name="femail" id="femail" value=""></li>
        <li class="col-lg-12"><label class="col-lg-3" for="fphone">Phone</label><input class="col-lg-9" type="text" name="fphone" id="fphone" value=""></li>
        <li><label for="finterest">Area of Interest</label></li>
                            <?php include 'connect.php'; 

/*
Displaying List of Categories from the Table - Category and that is limited to 10
*/
$qry=mysql_query("SELECT * FROM category LIMIT 0, 10 ", $con);

if(!$qry)
{
die("Query Failed: ". mysql_error());
}

while($row=mysql_fetch_array($qry))
{
?>
                    <li class="fcheck" ><INPUT TYPE=CHECKBOX NAME="finterest[]" value="<?php echo $row['category']; ?>"  > <?php echo $row['category']; ?><?php }?></li>


        <li><label for="fmsg">Message</label></li>
        <li><textarea rows="8" id="feedback_text"></textarea></li>
        <li><input type="button" value="Send" id="submit_form" /></li>
    </ul></div>
</div>

    </body>
</html>

PHP

<?php
  $to = "[email protected]";
  $name = $_POST['fname'];
  $subject = "Enquiry from ".$name;
  $phone = $_POST['fphone'];
  $email = $_POST['femail'];
  $message = $_POST['feedback'];
    $ip = $_SERVER['REMOTE_ADDR'];
    $httpref = $_SERVER['HTTP_REFERER'];
    $httpagent = $_SERVER['HTTP_USER_AGENT'];
    $today = date("F j, Y, g:i a");    

$interests  = 'None';
if(isset($_POST['finterest']) && is_array($_POST['finterest']) && count($_POST['finterest']) > 0){
    $interests = implode(', ', $_POST['finterest']);
}

    $mailbody = "
First Name: $name
Email: $email
Phone: $phone
Message: $message

Interests:
$interests

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";



  if(mail($to,$subject,$mailbody))
  {
   echo "Message Sent";
  }
  else
  {
    echo "Message Not Sent";
  }
?>

JS

/*
 * JQuery functions for slideout feedback form
 * 
 * Sets up a sliding form on click of a feedback button
 * On submit button will send the data to a php script
 * 
 * By http://www.paulund.co.uk
 */
(function ($j) {

  feedback_button = {

    onReady: function () {      
      this.feedback_button_click();
      this.send_feedback();
    },

    feedback_button_click: function(){
        $("#feedback_button").click(function(){
            $('.form').slideToggle();           
        });
    },

    send_feedback: function(){
        $('#submit_form').click(function(){
            if($('#feedback_text').val() != ""){

                $('.status').text("");

                $.ajax({  
                    type: "POST",  
                    url: "./process_email.php",  
                    data: 'feedback=' + $('#feedback_text').val(),  
                    success: function(result,status) { 
                        //email sent successfully displays a success message
                        if(result == 'Message Sent'){
                            $('.status').text("Feedback Sent");
                        } else {
                            $('.status').text("Feedback Failed to Send");
                        }
                    },
                    error: function(result,status){
                        $('.status').text("Error");
                    }  
                });
            }
        });
    },


  };

  $j().ready(function () {
      feedback_button.onReady();
  });

})(jQuery); 

I believe the issue is with the PHP but how can I verify where the issue is since the Jquery ajax does not allow the php errors to be shown. Is there a way I can temporarily allow the jquery to show php errors so I can verify the problem.

Upvotes: 0

Views: 186

Answers (2)

Miguel Ribeiro
Miguel Ribeiro

Reputation: 8184

I took a brief look into your code and I believe the URL of your AJAX is wrong. Are you sure the AJAX request reaches the PHP script? You are using the url ./process_email.php . I believe your are using, let's say, the UNIX terminal syntax to point to a file. However, on a web context, the URL is relative to your domain.

Let's say your domain is www.mywebapp.com . Without any rule or rerouting your contact form should be available from www.mywebapp.com/contact_me.php. What you want to do in your AJAX is call www.mywebapp.com/feedback/process_email.phpso the URL there must be /feedback/process_email.php.

In summary:

$.ajax({
    type: "POST",
    //WRONG --> url: "./process_email.php", <-- WRONG!
    url: "/feedback/process_email.php",
    data: 'feedback=' + $('#feedback_text').val(),
    success: function (result, status) { 
        //email sent successfully displays a success message
        if (result == 'Message Sent') {
            $('.status').text("Feedback Sent");
        } else {
            $('.status').text("Feedback Failed to Send");
        }
    },
    error: function (result, status) {
        $('.status').text("Error");
    }
});

Upvotes: 0

Rajesh
Rajesh

Reputation: 3778

Whatever PHP prints is returned as the ajax response. So, put echo statements in PHP as you debug and that will be available in the 'result' parameter of the success callback.

Upvotes: 1

Related Questions