CODEWITHSUNDEEP
jqueryhtml
Benj Gonzales
Benj Gonzales

Reputation: 57

jQuery: How to get first value and last value on input text

I have no idea how to get last value on input text. I already get the first value, when input type is empty did not get value. Here's my code:

HTML

<input type="text" name="date[]" class="date" id="date" value="6/17"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>

JS/jQuery

$(document).ready(function(){
    var $set = $('.date');
    var len = $set.length; 
    $set.each(function(index, element) {
        if (index === 0) {
            alert (this.value);
        }
    });     
});

Upvotes: 0

Views: 5074

Answers (3)

Ousmane D.
Ousmane D.

Reputation: 56433

I have no idea how to get last value on input text. I already get the first value, when input type is empty did not get value.

this should work.

var result =  $("input[value!='']");
console.log(result.first().val());
console.log(result.last().val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="date[]" class="date" id="date" value="6/17"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>

Also, just as a side tip, don't use multiple id attributes that have the same value because that's invalid HTML. Rather, if you want to access multiple elements use the class attribute which you've already done.

Upvotes: 0

Cara
Cara

Reputation: 644

You can reverse your loop and start from the last.

var $set = $('.date');
var len = $set.length;
var firstVal = $($set[0]).val();
var lastVal = null;
for (var i = len - 1; i > 0; i--){
  if ($($set[i]).val()){
    lastVal = $($set[i]).val();
    break;
  }
}

Upvotes: 0

noriMonsta
noriMonsta

Reputation: 2815

You can use [value!=''] to select only inputs with values. Then use first() and last() to get values from the first item and last item from the selected list.

var $values = $(".date[value!='']");
$("#firstValue").html($values.first().val());
$("#lastValue").html($values.last().val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="date[]" class="date" id="date" value="6/17"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/18"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value="6/19"><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>
<input type="text" name="date[]" class="date" id="date" value=""><br/>
<div>First value: <span id="firstValue"></span></div>
<div>Last value: <span id="lastValue"></span></div>

Upvotes: 1

Related Questions