AJAX: Form Submit to post comments

Question

I'm having an issue getting a form to submit and display the comment without the page refreshing (in-place) but when I click on the button, it takes me to the top of the page but does not perform any actions, does not insert into the database and thus does not display the comments in the page.

It is supposed to place the comment in the appropriate place with a fade effect.

Credits and Demo for the script: Original Script Here

The script provided int he link above, works if I try it as it comes but I had to modify it to fit my needs and this is what I have.

The Form:

<div class="comment-form">
    <form id="form" action="" method="post">
        <div class="top-form">
            <span class="parent name">
                <input class="field" type="hidden" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" />
                <input class="field" type="text" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" disabled="disabled">
            </span>
            <span class="parent name">
                <input class="field" type="hidden" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" />
                <input class="field" type="text" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" disabled="disabled"> 
            </span>
            <span class="parent last">
                <input class="field" type="hidden" name="PageID" value="<?php echo $_GET['PageID']; ?>" />
                <input class="field" type="text" name="PageID" value="<?php echo $_GET['PageID']; ?>" disabled="disabled">  
            </span>
            <div class="clear"></div>
        </div>
        <div class="bottom-form">
        <label>Choose an Option</label>
        <select id="commentbox" name="comment" class="bs-select form-control">
            <option disabled selected value> -- Options -- </option>
            <option value="First Option">First Option</option>
            <option value="Second Option">Second Option</option>
            <option value="Third Option">Third Option</option>
        </select>
        <button class="btn btn-icon submit" name="btn-sumbit" type="submit" id="submit" value="Post Message"><span class="icon"></span>Post Message</button>
        </div>
    </form>
</div>

<div class="comments">
    <div class="section-title">
        <h3>Messages</h3>
    </div>
    <ul class="level-1">
    <div class="comment-block">
    <?php echo $postedcomments; ?> <!-- loads previous comments on page load. it works. -->
    </div>
    </ul>
</div>

The script

located in the same page as the form.

<script>
$(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');

  form.on('btn-submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
      url: 'data/queries/comment-insert.php',
      type: 'POST',
      cache: false,
      data: form.serialize(), //form serialized data
      beforeSend: function(){
        // change submit button value text and disabled it
        submit.val('Posting...').attr('disabled', 'disabled');
      },
      success: function(data){
        // Append with fadeIn see http://stackoverflow.com/a/978731
        var item = $(data).hide().fadeIn(800);
        $('.comment-block').append(item);

        // reset form and button
        form.trigger('reset');
        submit.val('Post Message').removeAttr('disabled');
      },
      error: function(e){
        alert(e);
      }
    });
  });
});
</script>

The Query

comment-insert.php

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include_once 'include/dbconfig.php';
include_once 'include/dbconnection.php';
$conn = dbconnect();

if (!empty($_POST['comment'])) {
        $Name = mysqli_real_escape_string($conn, $_POST['Name']);
        $PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
        $ID = mysqli_real_escape_string($conn, $_POST['ID']);
        $Comment = mysqli_real_escape_string($conn, $_POST['comment']);

        $sql = "INSERT INTO comments
        (PageID, PosterID, PosterName, PostDate, Comment)
        VALUES
        ('$PageID', '$ID', '$Name', now(), '$Comment')";

        mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));    
}
?>

<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $_SESSION['Image'] ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>

<?php
    mysqli_close($conn);
endif?>

Answer 1

Your jQuery event handler refers to an non-existent jQuery object. Try replacing the first line of the event handler with this:

form.on('submit', function(e) {

Answer 2

This works:

$(document).ready(function() {
    //var form = $('#form');
    //var submit = $('#submit');

    $('#submit').on('click', function(e) {
        e.preventDefault(); 
        // the rest of your code goes here
    })
});