3

Trying to fill a series of input fields so that always the first empty input is filled. Code seems to always fill the first input...any ideas?

jQuery(document).ready(function() {
  for (i = 0; i < 4; i++) {
    $('.field:empty:first').val(i);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
j08691
  • 204,283
  • 31
  • 260
  • 272
Kevin Lindmark
  • 1,155
  • 3
  • 13
  • 26

3 Answers3

2

jQuery’s :empty selector does not select inputs that are empty, as you might think. Rather it means that the element has no child elements. This is the case of all input elements in your example. Then the :first selector selects the first element on each loop.

Intead, you can use .filter() to find field with an empty value followed by .first():

var emptyFields = $('.field').filter(function() { return $(this).val() === ""; });
emptyFields.first().val(i);


jQuery(document).ready(function() {
  for (i = 0; i < 4; i++) {
    var emptyFields = $('.field').filter(function() { return $(this).val() === ""; });
    emptyFields.first().val(i);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
1

The empty selector (https://api.jquery.com/empty-selector/) does only select elements which have no child nodes (including text). This means that your first input field is always selected, regardless of it's value. This should work (if your numbered loop is not relevant):

$("input.field").each(function() {
    if ($(this).val == '') {
        $(this).val('filled');
        return false;
    }
})

A note: jQuery elements are ordered in document order, so that this should always fill the first empty input in the order they appear in the document.

puelo
  • 5,464
  • 2
  • 34
  • 62
0

In the interest of code minimization, if I can I try to select and update an element one line if it's possible. So I select the first input, then filter it.

Edit: Ha! Okay, totally misread the question. Thanks for the heads up. Rewritten to sort through the list and find the first empty input and fill it.

$('input').each(function(){
     if ( $(this).val() == '' ){
          $(this).val('filled');
          return false;
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="field" value="i have a value" /><br/>
<input class="field" value="so do i" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
<input class="field" /><br/>
Matthew Davis
  • 96
  • 1
  • 7
  • 1
    This won't work if you run it in a loop. In this code, first `:first` selects the first input, and *then* the `.filter` decides whether to keep that single input selected or discard it, depending on whether it has a value. So in the first loop it will set the first `input`, and in subsequent loops it will do nothing. – Rory O'Kane Feb 02 '18 at 20:16
  • May have misunderstood the question. I thought he wanted ONLY the first input IF it was empty to be filled. So I tossed out the loop entirely. – Matthew Davis Feb 02 '18 at 20:18