Question

我在一个页面上有多个相同的表单。

我正在对字符进行倒计时，直到启用评论按钮。

我的工作有些什么，但我需要帮助才能使它只与当前形式相关。

这是一个小提琴：

如果页面上只有一个表单，则可以正常工作。

我以前用过

$(this).next

确保只有当前表单中的提交按钮受到影响，但这不适用于评论文本框或倒计时范围。

有任何帮助吗？谢谢！

包含jsfiddle错误：

JS：

$(document).ready(function () {
    disableComments();
    $( ".addpostcomment" ).keyup(function() {
        disableComments();
        $(this).next('.addcommentbutton').prop('disabled', !($(this).val().length > 20));
    });

    function disableComments() {
        var commentLength = $(".addpostcomment").val().length;
        var remainingCommentLength = 20 - commentLength;
        if (remainingCommentLength > 0) {
            $('.countdownCommentLength').show();
            $('.countdownCommentLength').text(remainingCommentLength + ' character(s) until minimum reached.');
        } else {
            $('.countdownCommentLength').hide();
        }
    }
});

形式：

<form class="addcomment" action="process/addcomment.php" method="post">
        <div class="commentappend">
        <input type="hidden" class="postid" name="postid" value="' . $postID . '">
        <input type="hidden" class="usernameuser" name="usernameuser" value="' . $usernameuser . '">
        <input type="hidden" class="userid" name="userid" value="' . $userid . '">
        <input type="hidden" class="buildid" name="buildid" value="' . $_GET['id'] . '">
        </div>

        <div class="commentbutton">
        <input type="text" maxlength="250" name="addpostcomment" class="addpostcomment" placeholder="Add Comment... (max 60 characters)" />
        <input type="submit" id="addcommentbutton" class="addcommentbutton" value="Post" disabled/>
        </div>
        <br />
        <span class="countdownCommentLength"></span>

    </form>

Answer 1

您可以通过使用父/子关系来实现此目的。例如，您有一个这样的表单：

<form>
    <input type="text"/><button disabled>Post</button><br>
    <label>20 more characters required</label>
</form>

通过使用$(this).parent("form").find("button")，我可以以与输入相同的形式访问该按钮。

$(document).ready(function(){

    $("input[type='text']").keyup(function(){

        if($(this).val().length > 19)
        {
            $(this).parent("form").find("label").html("Requirement met");
            $(this).parent("form").find("button").attr("disabled", false);
        }
        else
        {
            $(this).parent("form").find("label").html((20 - $(this).val().length) + " more characters required");
            $(this).parent("form").find("button").attr("disabled", true);
        }

    });

});

See this fiddle

Answer 2

试试这个：

$(document).ready(function () {
    disableComments();
    $( ".addpostcomment" ).keyup(function() {
        var form = this.form;
        disableComments(form);
        $('.addcommentbutton', form).prop('disabled', !($(this).val().length > 20));
    });

    function disableComments(form) {
        var commentLength = $(".addpostcomment", form).val().length;
        var remainingCommentLength = 20 - commentLength;
        var commentDisplay = $('.countdownCommentLength', form);
        if (remainingCommentLength > 0) {
            commentDisplay.show()
                .text(remainingCommentLength + ' character(s) until minimum reached.');
        } else {
            commentDisplay.hide();
        }
    }
});

您需要使用范围来限制您选择的元素。

Answer 3

您可以通过沿着这些行做某事来简化表单元素的识别

$(':text').on('keyup', function() {
    var btn = $(this).siblings(':submit');
    if($(this).val().length >= 20) {
        btn.prop('disabled', false);
    } else {
        btn.prop('disabled', true);
    }
});

使用$（this）查找表单中的项目

3 个答案:

See this fiddle