Question

Below is the code so far that I am working on, It will be a comment system, the flow:

1. User fills in comment form

2. hit submit, AJAX call is made and
   POST to a php script

3. script determines if user should
   enter a captcha form

4. If they need a captcha form it sends
   that response back along with there
   sanitized message

5. If they do not need captcha, it
   sanitizes the message and sends it
   back with a success response

6. If there is an error it sends an
   error message back.

7. If success we also add the message
   to the page

Ok my problems so far is that when I hit submit, it reloads the page instead of doing the ajax call, do you see any obvious reasons?

<script type="text/javascript">
$(document).ready(function () {
    $('#load').hide();
    //load facebox
     $('a[rel*=facebox]').facebox() 
});


// add comments
var messageArea = $('textarea#message');
$('input#submit-comment').click(function () {
    // Store vars
    var message = messageArea.hide().val();
    var dataString = 'message=' + message + '&u=1';

    //send comment to php
    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        dataType: "json",
        success: function (data) {
            if (json.response == 'captcha') {
                //they are mass posting so we need to give them the captcha form
                // maybe we can open it in some kind of dialog like facebox
                // have to figure out how I can pass the comment and user data to the captcha script and then post it
                jQuery.facebox(function () {
                    jQuery.get('captchabox.php', function (data) {
                        jQuery.facebox('<textarea>' + data + '</textarea>')
                    })
                })
                alert('captcha');
            } else if (json.response == 'error') {
                // there was some sort of error so we will just show an error message in a DIV
                // just an alert for testing purposes
                alert('sorry there was an error');
            } else if (json.response == 'success') {
                alert('sucess');
                // success append the sanitized-comment to the page
                $('#comments').prepend(obj.comment);
            };
        }
    })
    return false;
});
</script>

<div id="container">
    <div id="comments">
<!-- comments loop will be here from mysql results -->
        <div class="comment">
            <div class="date">
                <span class="day-month"><?php echo $dayMonth; ?></span>
                <span class="year"><?php echo $year; ?></span>
            </div>
            <span class="content"><?php echo stripslashes($message);?> <span class="time"><?php echo $datediff; ?></span></span>
            <div class="clear"></div>
        </div>
<!-- end comment loop-->
    </div>
    <div id="submission">
        <form name="comment-submission">
            <textarea id="message" name="message"></textarea>
            <span class="limit">140</span>
            <input type="submit" id="submit-comment" value=" " />
        </form>
        <div class="clear"></div>
    </div>
</div>

UPDATE:

I have added in return false; just before the closing of the click function below the ajax call but it has made no change on the page, it still reloads the page on click, any help please

Answer 1

Add a return false; after your call of $.ajax(). This will prevent the default action for submit element.