CODEWITHSUNDEEP
jquery
user527892
user527892

Reputation:

jQuery 'if' not working if using $(this) but works with ids

I've got a form with a load of checkboxes and textareas. When a checkbox is checked, the associated textarea appears. This is working fine.

However, I have a call to a database which gets information to populate the textareas with data if a certain query is made. An example of the HTML is as follows:

<li>
  <input type="checkbox" id="changes-trigger" />
  <label for="changes-trigger">Changes</label>
  <textarea id="changes" name="changes" rows="6" cols="40"><?php echo $report['changes']; ?></textarea>
</li>

If data is loaded into the textarea, I want the checkbox to be checked and for the textarea to be shown. If I target the textarea specifically using the id, I can do as I wish on page load:

if($('#changes').val()) {
  $('#changes-trigger').prop('checked','true');
  $('#changes').show();
}

However, as I said, I have a load of these and do not want to code for each individual one. Not only doesn't this do as I wish, it breaks the rest of my external .js file. Can anyone advise why the following doesn't work?

if($('textarea').val()) {
  $(this).siblings('input').prop('checked','true');
  $(this).show();
}

Upvotes: 2

Views: 55

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337570

Using the TEXTAREA selector will return you an array of all the textarea on your page. Applying .val() to this will only return you the value of the first textarea in the DOM tree. Fiddle to prove: http://jsfiddle.net/sc4vc/

You need to use the .each() method to get the specific value of each textarea

$('textarea').each(function() {
    if ($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show(); 
    }
}

Upvotes: 1

a&#39;r
a&#39;r

Reputation: 36999

The this context points to the window object unless it has been changed by an event callback or by using .call or .apply.

Instead, use this:

var $textarea = $('textarea');
if($textarea.val()) {
  $textarea.siblings('input').prop('checked','true');
  $textarea.show();
}

Upvotes: 1

Rup
Rup

Reputation: 34408

You're expecting this to now refer to the set of textareas on the page because you referenced them in your ifand it won't do that - it won't change inside a function.

You could do

$('div#abc textarea').each(function() {
    if($(this).val()) {
        $(this).siblings('input[type=checkbox]').prop('checked','true');
        $(this).show();
    }
});

instead. I suggest you search for only textareas inside a given div or similar (here with id abc) and only update inputs of the right type too!

Upvotes: 1

ipr101
ipr101

Reputation: 24236

$('textarea').val() will reference all 'textarea' elements on your page, try -

$('textarea').each(function() {
    if($(this).val()) {
      $(this).siblings('input').prop('checked','true');
      $(this).show();
    }
})

That should loop through all the textboxes on the page and apply your logic to each.

Upvotes: 1

Igor Dymov
Igor Dymov

Reputation: 16460

I'd recommend to use each to iterate through all textareas in this way:

$('textarea').each(function () {
    if($(this).val()) {
        $(this).siblings('input').prop('checked','true');
        $(this).show();
    }
});

Upvotes: 1

Related Questions