CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
AlexioVay
AlexioVay

Reputation: 4527

JQuery: Select all ids ending with specific name and change its siblings input button

I'm trying to indicate that a text can't be sent just yet, showing a grey input submit button with the class btn-primary. Instead btn-default is a coloured input button. However there are many textareas on one single site as my JQuery code should be used for both posting a new status and to comment several status entries (like in Facebook).

That's why posting a new status has an unique id called status_textarea and the comment textarea has an id like comment_textarea39 for example. So there is always a number at the end of comment textareas. That's what my first problem is with my code:

$('[id$=_textarea]').on('click contextmenu keyup blur', function(e) {
    var text = $(this).val();   
    var button = $(this).parent().hasClass('btn-primary');
    button.val(123); // Test to find the input button

    if (text.length < 1) $(button).removeClass('btn-default').addClass('btn-primary');
    else $(button).removeClass('btn-primary').addClass('btn-default');
});

I can select my status textarea with this, but not my comment textarea(s) as these have an id at the end like I mentioned (example: comment_textarea39). So I need something like a wildcard selection that only searches for: id ending with _textarea and ignores what the id is named after that.

Then I also want to select the next input (nearest after "this" textaera) that has the class btn-primary to switch it to btn-default.

EDIT

HTML Example:

Status Post Textarea:

<form id="statusForm">
<input type="hidden" name="privacy" value="0" autocomplete="false">
<textarea id="status_textarea" name="text" style="min-height:55px"></textarea>
<input id="status" data-case="status" data-form="#statusForm" type="submit" class="modal-send mt15 mb15 btn btn-primary" value="Senden" autocomplete="false">
</form>

Comment Textarea:

<form id="commentForm82">
<textarea id="comment_textarea82" name="text" class="comment mb15" placeholder="Hier kommentieren..."></textarea>   
<input type="hidden" name="log_id" value="82" autocomplete="false">
<input id="comment" data-case="comment" data-form="#commentForm82" data-hide="1" data-hide-success="1" type="submit" class="modal-send pull-right btn btn-default" value="Senden">          
</form>

Upvotes: 0

Views: 1204

Answers (3)

omikes
omikes

Reputation: 8513

for those more old-fashioned, just search each textarea for an id containing 'textarea', return it if it matches the pattern in MAP:

var theseTextAreas = $('textarea').map(function(){
    if ($(this).attr('id').indexOf('textarea') > -1)
    {
        return $(this);
    }
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

I would recommend you use a common class to bind events, i.e. add a class such as yourClass then you can use class selector

$(".yourClass").on('click contextmenu keyup blur', function(e) {
});

However, use Attribute Contains Selector [name*=”value”] to bind events and .find() within the event handler to identify input instead of hasClass()

$('[id*=_textarea]').on('click contextmenu keyup blur', function(e) {
    var text = $(this).val();

    //Important: Notice Here
    //Use find as hasClass returns you true/false not element
    var button = $(this).parent().find('btn-primary');

    if (text.length < 1) {
        $(button).removeClass('btn-default').addClass('btn-primary');
    } else {
        $(button).removeClass('btn-primary').addClass('btn-default')
    };
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Use the attribute contains selector instead of ends with selector as you have a dynamic part at the end of the id attribute

$('[id*=_textarea]')

Another better choice will be is to use a class selector, ie assign a common class like textarea to all the elements that needs to be selected then use 

$('.textarea')

Upvotes: 3

Related Questions