CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
superpuccio
superpuccio

Reputation: 12972

Hide buttons related to empty textareas (selecting issue)

I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)

I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:

enter image description here

The DOM structure of the single row is quite simple (I think):

enter image description here

So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.

Upvotes: 3

Views: 273

Answers (5)

CarlosJ
CarlosJ

Reputation: 46

You could hide buttons onLoad with the next selector:

$('textarea:empty').parent().next('td').find('button').hide();

Or if you want to disable the buttons:

$('textarea:empty').parent().next('td').find('button').prop("disabled", true);

It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:

 $( $('textarea') ).blur(function() {
    var button = $(this).parent().next('td').find('button');
    if($(this).val() === ''){
       button.prop("disabled", true);
    }else{
       button.prop("disabled", false);
    }
 });

You can check this fiddle with your table included: http://jsfiddle.net/6B9XA/4/

Upvotes: 3

wirey00
wirey00

Reputation: 33661

You can use filter() to get only the buttons who contains an empty textarea within that row

$('tr button').filter(function(){ // get all buttons
   return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons

Upvotes: 1

Jai
Jai

Reputation: 74738

I think you should use it this way:

$("#yourtableid").find("textarea").each(function() {
    if (this.value == "") {
       $(this).closest("tr").find("button").prop("disabled", true);
    }
});

"#yourtableid" this should be changed to your table id.

Selectors optimization for performance boost.

Upvotes: 1

saman khademi
saman khademi

Reputation: 842

try this

$('table textarea').change(function()
{
    var thisval=$.trim($(this).html())
    if(thisval=='')
    {
      $(this).parent().next().children('button').attr('disabled')
    }
})

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

Of course!

$("tr td textarea").each(function() {
    if (this.value == "") {
        $(this).closest("td").next("td").find("button").prop("disabled", true);
    }
});

Upvotes: 4

Related Questions