Question

I have multilpe comment forms on the same page that popup in modal boxes when trigger is clicked. The problem I’m having is if you submit the form once with nothing in the textarea the error is thrown that you need to enter a comment and all is well so far. Nowww…if you enter text and fill it out correctly and submit whatever text was entered will be submitted the number of failed attempts and I can’t figure out why.

the jquery:

$(".add-comment")
    .button()
    .click(function() {
    $(this).closest('.comments').find('.form-comment').submit(function() {
        $('.com-error').hide();
        $('.com-msg').hide();
        $.post('/do-comment.php', $(this).serialize(),
            function(data) {
                if(data.success)
                {
                    $('.com-msg').find('.info-msg').html(data.message);
                    $('.comments').find('.com-msg').slideDown().delay(2000).slideUp(500);
                }
                else
                {
                    $('.com-error').find('.error-msg').html(data.message);
                    $('.com-error').slideDown().delay(2000).slideUp(500);
                }
            }, 'json');
            return false;
    });
});

the php

if (!$user->isAuthorized()) {
    header('Location: index.php');
}else{

$i= 0;
    $cmt = array();
    if($_POST){
        $cmt['bid'] = filter_input(INPUT_POST, 'bid', FILTER_SANITIZE_STRING);
        $cmt['uid'] = $user->getId();
        $cmt['msg'] = filter_input(INPUT_POST, 'comment', FILTER_SANITIZE_STRING);
        if(trim($cmt['msg']) == '') {
            $data['success'] = false;
            $data['message'] .= 'You must enter a comment';
            $i++;
        }elseif(strlen($cmt['msg']) > 500) {
            $data['success'] = false;
            $data['message'] .= 'Your comment is to long.';
            $i++;
        }

        if($i <= 0){
            if(insertComment($cmt)){
                $data['success'] = true;
                $data['message'] = 'Added your comment!';
            }else{
                $data['success'] = false;
                $data['message'] .= 'Error adding your comment';
            }
        }
        echo  json_encode($data);
    }
    unset($_POST);
}

the insertComment function used above

function insertComment($comment = array()) {
    global $config;

    $sql = "INSERT INTO comments (bid, uid, message) VALUES ('".mysql_real_escape_string($comment['bid'])."', ".mysql_real_escape_string($comment['uid']).", '".mysql_real_escape_string($comment['msg'])."')";
    $result = mysql_query($sql, $config->db->con);
    if(!$result) {
    echo mysql_error();
        return false;
    }else{
        return true;
    }
}

the form

<div class="comments">
<div class="wrap">
';
if(!$user->isAuthorized()){
    $output .= '<center>You must be logged in to post comments</center>';
}else{
    $output .= '
    <form name="form-comment" class="form-comment" >
    <textarea name="comment" class="beat-comment"></textarea>
    <input type="hidden" name="bid" value="'.$id.'" />
    <br />
    <span class="fr"><button type="submit" class="add-comment">Add Comment</button></span>
    </form>';

    $output .= '
    <div class="com-msg">
        <div class="ui-widget">
            <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
                <p>
                    <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                    <div class="info-msg">
                    <!-- MSG FROM AJAX REQUEST IF PRESENT-->
                    </div>
                </p>
            </div>
        </div>
    </div>
    <div class="com-error">
        <div class="ui-widget">
            <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
                <p>
                    <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .7em;"></span>
                    <div class="error-msg">
                    <!-- ERROR MSG FROM AJAX REQUEST IF PRESENT-->
                    </div>
                </p>
            </div>
        </div>
    </div>
    ';
}

Thanks NeoNexus combined both of ours for a solution

$(".add-comment")
    .button()
    .click(function() {
    var myForm = $(this).parent();
        $('.com-error').hide();
        $('.com-msg').hide();
        $.post('/do-comment.php', $(myForm).serialize(),
            function(data) {
                if(data.success)
                {
                    $(myForm).parent().find('.info-msg').html(data.message);
                    $(myForm).parent().find('.com-msg').slideDown().delay(2000).slideUp(500);
                }
                else
                {
                    $(myForm).parent().find('.error-msg').html(data.message);
                    $(myForm).parent().find('.com-error').slideDown().delay(2000).slideUp(500);
                }
            }, 'json');
            return false;
});

Answer 1

Normally I would explain what your code is doing and how to fix it, but I’m very tired. Give this a whorl:

jQuery:

$('.add-comment').click(function(){
    var myForm = $(this).parent();
    $('.com-error').hide();
    $('.com-msg').hide();
    $.post('/do-comment.php', $(myForm).serialize(), function(data){
        if(data.success){
            $(myform).parent().find('.info-msg').html(data.message);
            $(myForm).parent().find('.com-msg').slideDown().delay(2000).slideUp(500);
        } else {
            $(myform).parent().find('.error-msg').html(data.message);
            $(myform).parent().find('.com-error').slideDown().delay(2000).slideUp(500);
        }
    }, 'json');
    return false;
});

Markup:

<form class="form-comment" >
    <textarea name="comment" class="beat-comment"></textarea>
    <input type="hidden" name="bid" value="'.$id.'" />
    <br />
    <span class="fr">
        <input type="button" class="add-comment" value="Add Comment" />
    </span>
</form>