Question

I’m making a simple shoutbox, where a user submits a form which is passed to PHP through a jQuery AJAX request, and their comment shows up on a wall feed.

The PHP / SQLite part is working fine, but I’m having trouble with the AJAX form. When I click submit (post), it processes the PHP correctly at shout.php but the navigation window also jumps over to shout.php when it should remain on the original page…

HTML form:

<form id="newPost" action="shout.php" method="post">

Name: <input type="text" id="name" name="name" />

Message: <textarea name="message" id="message"></textarea>

<input type="submit" id="submit" value="Submit" />

</form>

And the jQuery:

$("#newPost").submit(function() {


var name = $("#name").val();
var message = $("#message").val();
var data    = 'name='+ name +'&message='+ message;


$.ajax({
    type: "POST",
    url: "shout.php",
    data: data,
    success: function(html) {

        console.log(html);

            refresh_shoutbox();
    }
    });
return false;
});

Answer 1

Here is my suggestion for a better maintainability:

$(document).ready(function () {
  $("#newPost").submit(function(e) {
    $.post({
        $('#newPost').attr('action')
      , $('#newPost').serialize()
      , function(html) {
          console.log(html);
          refresh_shoutbox();
        }
    });
    e.preventDefault();
  });
});