Detect changes to an input box of type number

Question

I'm making a table of input boxes and trying to detect any changes made to them so I can update the total sum field which is the last column. I've looked at many suggestions and tried .change(), .on(), and .bind() functions but none of them seem to be working. Could someone please help me with this? Thank you.

var Categories = function(name){
  this.name = name;
  this.non_hispanic_or_latino = new subCategories();
  this.hispanic_or_latino = new subCategories();
  this.unknown_ethnicity = new subCategories();
}

var subCategories = function(){
  this.female = 1;
  this.male = 2;
  this.unknown = 3;
}


function createTable(racial_categories){
  
  for(i=0; i<racial_categories.length; i++){
    
    $("#racial_ethnic_table").append('<tr></tr>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td>'+racial_categories[i].name+'</td>');
   
      $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.unknown+'"></input></td>');
     
    $("#racial_ethnic_table").find("tr").eq(i).append('<td readonly id="Rowtotal">'+findRowTotal(i)+'</td>');
  }
}

$('.inputBox').bind('input', function() {
  console.log("here");
});

function findRowTotal(row){
  var sum = 0;
   $('#racial_ethnic_table tr').eq(row).find("td input").each(function() {
      sum += parseInt($(this).val());
    });
  return sum;
}

$(function() {
  
  var american_indian_or_alaska_native = new Categories("american_indian_or_alaska_native");
  var asian = new Categories("asian");
  var native_hawaiian_or_other_pacific_islander = new Categories("native_hawaiian_or_other_pacific_islander");
  
  var racial_categories = [american_indian_or_alaska_native, asian, native_hawaiian_or_other_pacific_islander];
  
  createTable(racial_categories);
});

body,
html {
  width: 100%;
}

table {
  display: block;
  max-width: 100%;
}
table, tr{
  border: 1px solid black;
}
tr:nth-child(odd) {
    background-color: #dddddd;
}
td{
  width:2%;
}
input {
  text-align:center;
  width:99%;
  padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="racial_ethnic_table"></table>

Possible duplicate of [Direct vs. Delegated - jQuery .on()](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on) — Alon Eitan, Apr 30 '17 at 16:43

score 0 · Answer 1 · answered Apr 30 '17 at 16:43

Your error was that your need to find element in $(document) and attach to event input like this:

$(document).on('input', '.inputBox', function() {
   console.log($(this).val());
});

var Categories = function(name){
  this.name = name;
  this.non_hispanic_or_latino = new subCategories();
  this.hispanic_or_latino = new subCategories();
  this.unknown_ethnicity = new subCategories();
}

var subCategories = function(){
  this.female = 1;
  this.male = 2;
  this.unknown = 3;
}


function createTable(racial_categories){
  
  for(i=0; i<racial_categories.length; i++){
    
    $("#racial_ethnic_table").append('<tr></tr>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td>'+racial_categories[i].name+'</td>');
   
      $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].non_hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].hispanic_or_latino.unknown+'"></input></td>');
    
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.female+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.male+'"></input></td>');
    $("#racial_ethnic_table").find("tr").eq(i).append('<td><input class="inputBox" type ="number" value="'+racial_categories[i].unknown_ethnicity.unknown+'"></input></td>');
     
    $("#racial_ethnic_table").find("tr").eq(i).append('<td readonly id="Rowtotal">'+findRowTotal(i)+'</td>');
  }
}

$(document).on('input', '.inputBox', function() {
  console.log($(this).val());
});

function findRowTotal(row){
  var sum = 0;
   $('#racial_ethnic_table tr').eq(row).find("td input").each(function() {
      sum += parseInt($(this).val());
    });
  return sum;
}

$(function() {
  
  var american_indian_or_alaska_native = new Categories("american_indian_or_alaska_native");
  var asian = new Categories("asian");
  var native_hawaiian_or_other_pacific_islander = new Categories("native_hawaiian_or_other_pacific_islander");
  
  var racial_categories = [american_indian_or_alaska_native, asian, native_hawaiian_or_other_pacific_islander];
  
  createTable(racial_categories);
});

body,
html {
  width: 100%;
}

table {
  display: block;
  max-width: 100%;
}
table, tr{
  border: 1px solid black;
}
tr:nth-child(odd) {
    background-color: #dddddd;
}
td{
  width:2%;
}
input {
  text-align:center;
  width:99%;
  padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="racial_ethnic_table"></table>

That works but I don't know how to get the updated value from that. — Intelli, Apr 30 '17 at 16:57
I wrote that `$(this).val()` works correct, its return new value from input, you can try it in my answer — TheMY3, Apr 30 '17 at 16:58

Detect changes to an input box of type number

1 Answers1