change event for input type number when input new number

Question

I am trying to get the value of the input than check whether it has changed, by default, the value is 1. When changed,inputted or incremented using the arrow keys, it will trigger the change listener. So far, it does not trigger when I change the value from the default.

Code for the row I want to extract the input value from.

<tr class="deleteRow">
    <th scope="row">
        <button type="button" class="btn btn-danger btn-sm">
            <i class="fas fa-trash"></i>
        </button>
    </th>
    <td>Item 1</td>
    <td>
        <input class="form-control" type="number" value="1" />
    </td>
    <td>RM 50.00</td>
</tr>

My function code so far:

<script>
    $('.form-control').change(function(){
        alert("this doesn't fire help!");
    });
</script>

Any advice?

EDIT: Some extra information, the row is added dynamically with a button. I checked the other buttons for the row, they work. They all use on('click') except the number input which I'm working on.

EDIT EDIT: So it doesn't work on rows added after the page is loaded. If the rows were added after programmatically, the listener doesn't work.

Does it fire when you blur the field? This is what the change event is waiting to fire on. — scunliffe
– scunliffe, Commented Oct 15, 2019 at 12:48
@scunliffe no it doesn't, all the other listener work, except the change listener attacked to the input. — digdigdoot
– digdigdoot, Commented Oct 15, 2019 at 13:07

Claudio · Accepted Answer · 2019-10-15 12:48:38Z

3

Try the following, your code is missing the ' it should be '.form-control':

$('.form-control').change(function(){
  alert("this doesn't fire help!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="deleteRow">
    <th scope="row">
        <button type="button" class="btn btn-danger btn-sm">
            <i class="fas fa-trash"></i>
        </button>
    </th>
    <td>Item 1</td>
    <td>
        <input class="form-control" type="number" value="1" />
    </td>
    <td>RM 50.00</td>
</tr>

answered Oct 15, 2019 at 12:48

Claudio

5,2112 gold badges25 silver badges34 bronze badges

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

1 Comment

digdigdoot Over a year ago

Ah my bad! I've updated the code, but it still doesn't fire sadly. Oddly enough, my other buttons seem to be working.

gowtham rajan · Accepted Answer · 2019-10-15 12:59:20Z

1

Solution All Key Events arrow,key press,mouse wheel

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <tr class="deleteRow">
        <th scope="row">
            <button type="button" class="btn btn-danger btn-sm">
                <i class="fas fa-trash"></i>
            </button>
        </th>
        <td>Item 1</td>
        <td>
            <input class="form-control" type="number" value="1" />
        </td>
        <td>RM 50.00</td>
    </tr>
<script>
$(document).ready(function() {
    $('.form-control').on('input', function() {
        alert($('.form-control').val())
      });
});
</script>

answered Oct 15, 2019 at 12:59

gowtham rajan

3222 silver badges14 bronze badges

Comments

digdigdoot · Accepted Answer · 2019-10-15 13:15:58Z

1

Thank you to those who pointed out my typo. I've fixed the code for that. My main issue was that the change event didn't trigger for my dynamically added rows.

The solution is that I had the change event detect changes in the parent which will contain the dynamically added rows, which in this case, be tbody.

The new function code is as below.

$('.table tbody').on('input',function(){
     alert("this doesn't work help!");
});

answered Oct 15, 2019 at 13:15

digdigdoot

76111 silver badges30 bronze badges

Comments

Kalyani Rathore · Accepted Answer · 2019-10-15 13:03:52Z

0

You need to put single quotes in class. Try this, Will definitely work.

$('.form-control').change(function(){
        alert("this doesn't fire help!");
    });

answered Oct 15, 2019 at 13:03

Kalyani Rathore

931 silver badge8 bronze badges

Comments

DEEPAK · Accepted Answer · 2019-10-15 13:11:42Z

0

Remember one thing always while writing the JS , you should always check the console

With your current code $(.form-control) there must be an error log in console something like unexpected token . because it needs to be inside quotes , it should be something like $(".form-control") , it doesn't matter you can single or double quotes

answered Oct 15, 2019 at 13:11

DEEPAK

1,58415 silver badges24 bronze badges

Collectives™ on Stack Overflow

change event for input type number when input new number

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related