on input event get last input jquery

Question

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).is(':last-child')) {
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

In the demo when I input in the box and reached the last box it does not go in the condition of last box.

I want to be able to tell if the one i'm inputting on(typing on) is the last box of the class payment.

want to tell ? what it means exactly. your question is not clear — Nalin Aggarwal
– Nalin Aggarwal, Commented Jan 4, 2017 at 6:34
not getting you properly please try this to select last element if you want using jquery $( ".payments:last-child" ) or for css .payments:last-child{} — bharat
– bharat, Commented Jan 4, 2017 at 6:34
i tried $( ".payments:last-child" ) but it didnt work. i want to know if the one I am inputing on is the last child of class payment — Pekka
– Pekka, Commented Jan 4, 2017 at 6:37

Frogger · Accepted Answer · 2017-01-04 06:47:39Z

2

The reason for :last-child not working is because the input fields are not inside any tag hence they are not children to any parent. So there are two ways to solve this,

put all the input fields inside a div element
change the if condition to if($(this).is('input:last'))

answered Jan 4, 2017 at 6:47

Frogger

1852 silver badges10 bronze badges

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

2 Comments

Pekka Over a year ago

i tried using method why it didnt work my code is like this if($('.payments').last()){

Frogger Over a year ago

$('.payments').last() returns an element so it will work when used like this if($(this).is($('.payments').last()))

Rahul · Accepted Answer · 2017-01-04 07:01:16Z

1

Try this changes

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).is(':last-of-type')) { // I have changed this line
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

I hope this will work

EDIT : $("input:last-of-type") - Select every <input> element that is the last <input> element of its parent:

For more details visit link

edited Jan 4, 2017 at 7:01

answered Jan 4, 2017 at 6:57

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

2 Comments

Pekka Over a year ago

can add explanation on how it works and why current didnt work?

Rahul Over a year ago

Check for difference between last-child and last-of-type, you will get it

guradio · Accepted Answer · 2017-01-04 06:34:14Z

var sum = 0;
$(document).on("input", ".payments", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).index() == ($(".payments").length)) {
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }


})

input{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />
<input type="text" class="payments" />

Check for index is equal to class length

Collectives™ on Stack Overflow

on input event get last input jquery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related