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 = "[email protected]";

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

                //test data
                //$contactDetails = "[email protected]";


                // send message
                $message = "Message reads: ".$msg;
                //$to = "[email protected]";
                $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 [email protected] .

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.

Help us help you. What isn't working? What do you expect to happen, and what happens instead? Are there any errors in your javascript console? Does the XHR request on the network tab of your browser tools look correct? — Jason P
– Jason P, Commented Aug 28, 2013 at 15:50
It's possible the default submit event is firing. Add event.preventDefault() to the beginning of your handler. — Will M
– Will M, Commented Aug 28, 2013 at 15:52
Your HTML doesn't have a closing </form> tag and the first line of your PHP should be changed from $msg = $_POST['mesage']; to $msg = $_POST['message']; . Still not sure if that's the problem or not. — zigdawgydawg
– zigdawgydawg, Commented Aug 28, 2013 at 15:53
dataType (which is default string I know, but does the PHP output even a string), success callback? Chaining .done() although expressed as a alternative method to the success callback is still going to fire regardless cause the AJAX is going to complete and trigger it. and I also agree with Fred-ii- to many errors, this looks like a hack job of code copied and pasted from various sources strung together and a few variables changed. Without regards to how things are actually working/meant to work. — chris
– chris, Commented Aug 28, 2013 at 16:04

Manu M · Accepted Answer · 2013-08-28 16:18:05Z

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

answered Aug 28, 2013 at 16:18

Manu M

1,0645 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rejayi CS · Accepted Answer · 2013-08-28 16:28:50Z

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 = "[email protected]";
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
echo "Mail Sent.";

Collectives™ on Stack Overflow

Post form values using jquery and PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related