AJax variable not getting send to php variable

Question

Im very new to Ajax and Jquery and learning through SO and online tutorials so please keep in mind im a rookie should you read and be kind enough to answer my post.

I have managed to create the following which is a form that displays a message on submit. If form was successfully submitted a message is displayed without page refreshing as you can see in image below:

FORM

        <form name="message-form" action="" id="contact-form" method"post">
        Message<br /> <input type="text" name="msg" value="" /><br />
        <input type="submit" value="Contact Us" name="contact" class="buttono" />
        </form>
        <div class="form-feedback" style="display:none">
        Thank You We will Get Back to you 
        </div>
         <div class="form-feedback" style="display:none">
        Ooops....Something Went Wrong
        </div>
       <div> 

JQUERY

  $(function(){
        $("#contact-form").submit(function(e){
        e.preventDefault(); 

        $form = $(this);

        $.post(document.location.url, $(this).serialize(), function(data){
            $feedback = $("<div>").html(data).find(".form-feedback").hide();
            $form.prepend($feedback)[0].reset();
            $feedback.fadeIn(1500)
        })

        });
    })

What I want to do

Retrieve the value from text field message and assign it to php variable

My problem

When I try to retrieve the value of message with the following code, nothing happens:

PHP code below form

 <?php
     if(isset($_POST['contact'])){
        $message = $_POST['msg'];
        echo $message; 
     }
     ?>  

Im very new to Ajax so I guess I am doing something wrong here, unfortunately I dont know where I am going wrong so I am hoping someone can put me on the right path here.

Thanks in advance

Answer 1

Hanoncs suggestion will work, but keeping things only browser side (by displaying the message only from form to div), will always give the user the impression that message is send (processed) server-side, while it is not always the case, one would make php return it before displaying it with javascript. So here is another approach I suggest:

First, Make a Separation of concerns: Sending a POST HTTP Request to the same current page contardicts somehow the purpose of AJAX. The HTTP Response will contain all the page ( the HTML rendred by PHP, the embeded HTML used for templating, and maybe the script if it is not joined in a script tag). Instead, I suggest you create a small separate php file that is responsible for rendereing only the needed markup. And so, instead of using $.post(document.location.url.., one would use $.post('pathToSmallPHPFile'..

Second, let jQuery AJAX functions accept callbacks or use promises. I suggest you carefully read the following link.

Answer 2

The issue is that you are using ajax, which does not cause a page refresh, and then trying to echo out the posted variable, since there is no page refresh, php will not process the page again to echo the posted variable.

My solution is to use javascript to display the text entered and then database it using php.

Here is an example,

$(document).ready(function () {
    $(".button").click(function () {
        $('p').text($('#msg').val());
    });
});

http://jsfiddle.net/r4nanmof/ you dont need ajax if all you want to do is display it on the page. If you plan on saving in the database then ajax is required.