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 https://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class — tech2017, Aug 01 '17 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, Aug 01 '17 at 15:31

charlietfl · Answer 1 · 2017-08-01T15:49:24.527

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 01 '17 at 15:49

answered Aug 01 '17 at 15:36

charlietfl

170,828
13
121
150

marekpw · Accepted Answer · 2017-08-01T17:42:26.250

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 01 '17 at 17:42

answered Aug 01 '17 at 15:38

marekpw

662
2
5
19

R.K.Saini · Answer 3 · 2017-08-01T15:44:57.067

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 01 '17 at 15:44

answered Aug 01 '17 at 15:38

R.K.Saini

2,678
1
18
25

This adds the `fg-toggle` class to every `fg-line` as though the `if` statement always evaluates as `true`, but my inputs are empty. – jonmrich Aug 01 '17 at 15:41

score 0 · Answer 4 · answered Aug 01 '17 at 15:35

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');
  }
})

score -1 · Answer 5 · answered Aug 01 '17 at 15:36

-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 01 '17 at 15:36

Richard A. Lozada

31
1

The problem with this is that I don't want to write this out 35 times since I have all different ids (`#place_name`) – jonmrich Aug 01 '17 at 15:38
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 Aug 01 '17 at 15:45
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 – Richard A. Lozada Aug 01 '17 at 15:51

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

5 Answers5