Jquery表单提交两次

时间:2012-02-14 01:40:20

标签: jquery forms

我在单击触发器时弹出模态框的同一页面上有多个注释表单。我遇到的问题是如果你在textarea中没有任何内容提交表单,则会抛出错误,你需要输入一个评论,到目前为止一切都很顺利。 Nowww ...如果您输入文本并正确填写并提交输入的任何文本将提交失败的尝试次数,我无法弄清楚原因。

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;
    });
});

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);
}

上面使用的insertComment函数

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;
    }
}

表格

<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>
    ';
}

感谢NeoNexus将我们两者结合起来提供解决方案

$(".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;
});

1 个答案:

答案 0 :(得分:0)

通常我会解释你的代码在做什么以及如何修复它,但我很累。给它一个螺旋:

<强> 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;
});

<强>标记:

<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>