Jquery work with multiple form

Question

I am generating multiple forms using php code in a php page where each form has a textarea input and a button. Once a value will be entered the button will be enabled and its empty button will be disable. I found hard to trigger textarea and button using their id as php code is generating unknown number of forms in different type. Is there any other way to trigger form and it's button and textarea input to be able to disable/enable button?

<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>
    <form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
                <input name="txtHiddenMusicPostID" value="37" type="hidden">
            </div>
            </div>
        <button type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" disabled="disabled">
        </button>
</form>

jqueryCode:

            jQuery("document").ready(function ($) {
            var $register = $("button[name='post-Comment']");
            //$register.attr('disabled', true);
            $("textarea[name='txtcomment']").keyup(function () {
                var trigger = false;
                $("textarea[name='txtcomment']").each(function() {
                    if ($(this).val() === '') {
                        trigger = true;
                    }
                });
                if (trigger) {
                    $register.attr('disabled', 'disabled');
                } else {
                    $register.removeAttr('disabled');
                }
            });
        });

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Is this the effect you were seeking?

jsFiddle Demo

HTML:

<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>
<form method="POST" name="comment" class="setCommentBox">
    <div class="form-group">
        <div class="bs-example">
            <textarea class="form-control" rows="2" name="txtcomment" maxlength="140" style="resize: none;" placeholder="Compose comment"></textarea>
            <input name="txtHiddenMusicPostID" value="37" type="hidden" />
        </div>
    </div>
    <input type="submit" class="btn btn-success pull-right" name="post-Comment" value="post-Comment" />
</form>

jQuery:

$('.btn').prop('disabled',true);

$("textarea[name='txtcomment']").keyup(function () {
        if ($(this).val() != '') {
            $(this).closest('form').find('.btn').prop('disabled', false);
        }else{
            $(this).closest('form').find('.btn').prop('disabled', true);
        }
});

Notice that the button element was changed to an input field element. Much easier to work with, especially when enabling/disabling etc.

Unless you are using a version of jQuery < 1.6, use .prop() instead of .attr() to disable the button:

$register.attr('disabled', 'disabled'); //DO NOT USE THIS

$register.prop('disabled', true);  //USE THIS METHOD

Sources:

.prop() vs .attr()

thanks a lot for quick hand, it worked :) @gibberish – Ehasan Rashdul Islam Oct 09 '14 at 02:20 — Ehasan Rashdul Islam, Oct 09 '14 at 02:20

Jquery work with multiple form

1 Answers1