CODEWITHSUNDEEP
jqueryonchange
digdigdoot
digdigdoot

Reputation: 761

change event for input type number when input new number

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.

Upvotes: 1

Views: 81

Answers (5)

digdigdoot
digdigdoot

Reputation: 761

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!");
});

Upvotes: 1

DEEPAK
DEEPAK

Reputation: 1504

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

Upvotes: 0

Kalyani Rathore
Kalyani Rathore

Reputation: 93

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

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

Upvotes: 0

gowtham rajan
gowtham rajan

Reputation: 322

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>

Upvotes: 1

Claudio
Claudio

Reputation: 5203

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>

Upvotes: 3

Related Questions