Post form values using jquery and PHP

Question

I'm trying to send a simple form to an email using PHP , but cannot get the actual ajax function to work.

This is the form:

<form id="quick-booking-form" method="post" action="#">
                    <input type="text" name="mail" id="mail">
                    <textarea name="message" id="message">
                    </textarea>
                    <input type="submit" value="Send the Message" id="SendTheForm">
                </form>

This is then sent to a separate Javascript function, which holds the ajax:

$(function() {  
            //alert("page loaded");
            $('#quick-booking-form').submit(function(event) {
                event.preventDefault();
                alert("Start of function");
                var mail = $("#mail").val();
                var message = $("#message").val();
                alert("Mail: " + mail + " Message: " + message);

                $.ajax({
                    type: "POST",
                    url:"process.php",
                    data:{ 
                        "mail": mail,
                        "message": message, 
                        },
                    dataType: "text"
                }).success(function(result){
                    alert(result);
                    //next line: end of function
                    }) ;

                //next line: end of ajax
            });
        //next line: end of script
        }); 

which should send the data to this PHP file (process.php):

$msg = $_POST['message'];
                $UserName = $_POST['mail'];

                $contact = "Booking Manager";
                $reply = "web-bookings@thesite.net";

                //Subject is always...
                $subject = "A message from ".$UserName;
                $from = $reply;

                //test data
                //$contactDetails = "test@test.net";


                // send message
                $message = "Message reads: ".$msg;
                //$to = "notify@test.com";
                $to = $_POST['mail'];
                //$headers = "From: " . $contact."\r\n"."Reply-To:".$reply;
                $headers = "From: " . $contact;
                mail($to, $subject, $message, $headers);
                echo "Mail Sent.";

What should happen is that the form is submitted. It then gets validated (code omitted) in validate.js . If it passes, the form data is sent to process.php. This in turn sends a notification message to notify@test.com .

What currently happens is that the alert("Start of Function") fires, and so does the alert showing the correct values.

And this is as far as it gets. The mail function does not seem to fire, and the last alert does not show either.

Answer 1

You are right but some changes, try this

$(function() {  
//alert("page loaded");
$('#quick-booking-form').submit(function(event) {
    event.preventDefault();
    alert("Start of function");
    var mail = $("#mail").val();
    var message = $("#message").val();
    alert("Mail: " + mail + "Message: " + message);

    $.ajax({
        type: "POST",
        url:"process.php",
        data:{ 
            "mail": mail,
            "message": message, 
            },
        dataType: "text",
        success: function(html) {
           alert(html);
        }
    });
    return false;

    //next line: end of ajax
    });
    //next line: end of script
  }); 

Use preventDefault function and success for ajax instead of done

Answer 2

try this Include JQUERY Library

HTML :

<form id="quick-booking-form" method="post" action="javascript:return false">
email:
<input type="text" name="mail" id="mail">
<br/>
message: <textarea name="message" id="message">
</textarea><br/>
<input type="submit" value="Send the Message" id="SendTheForm">
</from>

SCRIPT :

$(function() {  
    //alert("page loaded");
    $('#quick-booking-form').submit(function(event) {

        var mail = $("#mail").val();
        var message = $("#message").val();
        if(mail==""){
            alert("enter Mail"); return false;
         }
        if(message==""){
            alert("enter message"); return false;
         }
        $.ajax({
            type: "POST",
            url:"process.php",
            data:{ 
                "mail": mail,
                "message": message, 
                },success:function(result){
                    alert(result);
                 }

        });

    //next line: end of ajax
    });
//next line: end of script
}); 

process.php :

$to =$_POST['mail'];
$subject = "Test mail";
$message =$_POST['mesage'];
$from = "bookings@test.net";
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
echo "Mail Sent.";