$.post not POSTing anything

Question

i am using the following jquery to post comments to user_submit.php

var submit = document.getElementById("submit_js");
 var comment = document.getElementById("comment");

 $("#submit").bind('click', function(){
  $.post("user_submit.php", {
     comment: $("#comment").text()
  });
 });

the user_submit.php listens like:

$comment = htmlspecialchars($_POST["comment"]);

i can see in the Firebug console that there is no POST happening. only a single GET that i use for a different function (can this be the culprit?)

Answer 1

Assuming:

<input type="text" id="comment">
<input type="button" id="submit_js">

you want:

$(function() {
  $("#submit_js").click(function() {
    $.post("user_submit.php", {
      comment: $("#comment").val()
    });
  });
});

PHP:

<?php
$comment = $_POST['comment'];
//...
echo htmlspecialchars($comment); // nothing catches this currently
?>

You also seem to be confusing "submit" and "submit_js" in your code. I'd advise against mixing Javascript and jQuery code unnecessarily too (the "getElementById()" business). You should familiarize yourself with jQuery selectors. For example:

$("#submit_js")

will create a jQuery object with all the elements (which should only be zero or one elements) with the ID of submit_js.

Answer 2

Remember that you're posting via AJAX, so even if you're echoing back the field value, it won't show on your screen unless you're listening for it in the $.post callback.

To check what the problem may be, submit the form normally without jQuery. If your PHP script is echoing back the field value, then the PHP script is working - check your JavaScript. If the you're getting blank, or empty array when using print_r(), then make sure the field name in your form is the same as what you're using in the PHP script.

Don't want you to have to rewrite your code, but here's what I recommend to do.

<form class="comments" method="post" action="user_submit.php">
    <input type="text" name="comment" />
    <input type="submit" value="Submit" />
</form>

JavaScript:

$('.comments').submit(function() {
    var $form = $(this);

    $.post(
        $form.attr('action'),
        $form.serialize(),
        function(data, status) {
            console.log(data);
        }
    );

    return false;
}

This will submit your form to the PHP script. In the callback function, "data" is the returned data from the PHP script. So if you echo the field value back, the Firebug console will display the value.

In the event the user's browser has JavaScript disabled, the form will still submit properly. Of course your PHP script would have to check if the form was submitted via AJAX so that it can process properly depending on the request method. An easy way to test is to check for the X-Requested-With header. If it was sent via AJAX, the value would be XMLHttpRequest.