Check if input is empty, if not, add class to parent div

Question

I have a number of inputs like this:

<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
    <label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
    <label class="fg-label">Place Address</label>
</div>

I get some data from an API and then append to these inputs (so the user can edit).

This works fine. The issue is that I want to add a class to this:

<div class="fg-line">

This is simple enough if I only have one of these and one input, but since I have multiple, I need some way to check each input and if not empty add the class fg-toggled such that the line becomes:

<div class="fg-line fg-toggled">

If I had just one input, I'd do this:

if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
  $('.fg-line').addClass('fg-toggle')
}

But I don't know how to do this without writing this out for every class (there are 30+). Is there a way to iterate this somehow? I tried checking .place-edit but since it's a class, if any of the inputs with the class are not empty then they all get the new class added.

yes, you can iterate by selecting class. see this for help stackoverflow.com/questions/4735342/… — tech2017
– tech2017, Commented Aug 1, 2017 at 15:30
@tech2017 yes, but what am i testing? Don't I still have to check every id (place_name, etc) first? That's the tricky part (to me anyway.) — jonmrich
– jonmrich, Commented Aug 1, 2017 at 15:31

marekpw · Accepted Answer · 2017-08-01 17:42:26Z

2

Simply loop through each input and find the parent using .closest().

$('.placeInformation').each(function() {
    var $input = $(this);

    if ($input.val()) {
        var $parent = $input.closest('.fg-line');
        $parent.addClass('fg-toggled')
    }

});

Sample plunkr

edited Aug 1, 2017 at 17:42

answered Aug 1, 2017 at 15:38

marekpw

7122 gold badges5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2017-08-01 15:49:24Z

2

Can use filter()

$('.fg-line').has('.placeInformation').filter(function(){
   return !$(this).find('.placeInformation').val()
}).addClass('fg-toggled')

Not sure what "default" should be or how it is declared. Could be set in a data attribute and add an || to above filter condition

edited Aug 1, 2017 at 15:49

answered Aug 1, 2017 at 15:36

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

R.K.Saini · Accepted Answer · 2017-08-01 15:44:57Z

1

Use each() and closest() Try this :

$(".fg-input").each(function() {

  if ($(this).val() != '') {
    $(this).closest(".fg-line").addClass('fg-toggle');
  }
})

.fg-toggle
{
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fg-line">
  <input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
  <label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
  <input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
  <label class="fg-label">Place Address</label>
</div>

edited Aug 1, 2017 at 15:44

answered Aug 1, 2017 at 15:38

R.K.Saini

2,6981 gold badge20 silver badges25 bronze badges

1 Comment

jonmrich Over a year ago

This adds the fg-toggle class to every fg-line as though the if statement always evaluates as true, but my inputs are empty.

CumminUp07 · Accepted Answer · 2017-08-01 15:35:34Z

0

You could just loop through the .place-edit class and then check the values and add the class to the parents, like this:

$('.place-edit').each(function(){
    if($(this).val() != '' || $(this).val() != $(this).defaultValue) {
    $(this).parent().addClass('fg-toggle');
  }
})

answered Aug 1, 2017 at 15:35

CumminUp07

1,9781 gold badge11 silver badges22 bronze badges

Comments

Richard A. Lozada · Accepted Answer · 2017-08-01 15:36:56Z

-1

Try this.. I'm assuming they all have the same class

 if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
  $('.fg-line').each(function(){
    $(this).addClass('fg-toggle')
  });
}

answered Aug 1, 2017 at 15:36

Richard A. Lozada

311 bronze badge

3 Comments

jonmrich Over a year ago

The problem with this is that I don't want to write this out 35 times since I have all different ids (#place_name)

Richard A. Lozada Over a year ago

if you dont want repeat 35 times, can get input similar to: $('.fg-line').each(function(){ if($(this).find('input').val() !== '') $(this).addClass('fg-toggle') }); or similary

Richard A. Lozada Over a year ago

You need get the parent class and get input of parent class and apply conditional if are true go ahead to addClass similar of i write

Collectives™ on Stack Overflow

Check if input is empty, if not, add class to parent div

5 Answers 5

Comments

Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related