I have this html
<div class="table-responsive table-responsive-data2">
<table class="table table-data2" id="resulttable" style="display: block;">
<thead>
<tr>
<th>NSN</th>
<th>Name</th>
<th>QTY</th>
<th>Price ($)</th>
<th>Manufacturer</th>
<th>Part Number</th>
<th>Shipping</th>
</tr>
</thead>
<tbody id="producttable">
<!-- -->
<form id="myform0"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>123
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(123)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm " id="Qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;">
</td>
<td class="desc">
<input class="au-input au-input--sm" id="Price" type="text" name="search" placeholder="i.e 900" style="width: 90px;">
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</td>
<td class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="shipping cost" style="width: 120px; height: 30px;"><br>
<select name="selectSm" id="SelectLm" class="form-control-sm form-control" style="width: 120px;">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(0)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
<form id="myform1"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>343
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(343)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm " id="Qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;">
</td>
<td class="desc">
<input class="au-input au-input--sm" id="Price" type="text" name="search" placeholder="i.e 900" style="width: 90px;">
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</td>
<td class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="shipping cost" style="width: 120px; height: 30px;"><br>
<select name="selectSm" id="SelectLm" class="form-control-sm form-control" style="width: 120px;">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(1)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
<form id="myform2"></form>
<tr class="tr-shadow">
<td style="width: 90px;">
<div>212
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#productModal" onclick="showproductmodal(212)">
Add Photos
</button>
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" id="Nomenclature" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm " id="Qty" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;">
</td>
<td class="desc">
<input class="au-input au-input--sm" id="Price" type="text" name="search" placeholder="i.e 900" style="width: 90px;">
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;">
</td>
<td class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="shipping cost" style="width: 120px; height: 30px;"><br>
<select name="selectSm" id="SelectLm" class="form-control-sm form-control" style="width: 120px;">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(2)">Submit</button>
</td>
</tr>
<tr class="spacer"></tr>
</tbody>
</table>
and I have a function that is triggered from the dynamically created created html
function postitem(index) {
var formid='#myform'+index
$('input').each(function(index){
console.log($(this).val());
});
}
the selector $('input') captures all the input value in the html, what I really want is for it to capture only the input within a given #id. So I tried
$('#myform1 input').each(function(index){
console.log($(this).val());
});
and
$(formid).('input')
and none of them yielded any result. How can implement retrieving a input within a div id?
You can access the input very much directly without using the parent $("#idInput") or for accessing it through parent you can use $('#myform1 #idInput'). But make sure you have defined the ids of the element at the time of generation.
There is another way of doing it you can use it as array $('#myform1 input')[index]. Note the index should be the desired number of appearance your input.
try this:
$("input").parent( "#myform1" );
As i said in my comment, your javascript codes are true. but there is two problem that cause you have not any result:
#myform1 is blank.
In another form you have some input controls, but they have not any value.
Below I added an input with some value to your form #myform1 and test your code:
$('#myform1 input').each(function(index){
console.log($(this).val());
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form id="myform1"><input value="Some Thing" /></form>
I am creating a dynamic form in a Backbone.js view. I want to get all the JSON data from the form in my view without using jQuery. Is there any way to get the data?
For example: When You check the checkbox, I only want the data for the checked field.
<table class="table">
<thead>
<tr>
<th></th>
<th>{{labels.selectImage}}</th>
<th>{{labels.nameVisibleToShop}}</th>
<th>{{labels.sourceCode}}</th>
<th>{{labels.pricePerItem}}</th>
</tr>
</thead>
<tbody>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
<tr id ="school-imageId-{{categoryImage.cmsId}}">
<td><input type="checkbox" class="form-control mz-embrodiary-enable"/></td>
<td><img width="40px" src="{{categoryImage.imageUrl}}" /></td>
<td>
<input type="text" name="name" class="form-control" placeholder="{{labels.nameVisibleToShop}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="sourceCode" class="form-control" placeholder="{{labels.sourceCode}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="name">{{labels.genericRequired}}</span>
</td>
<td>
<input type="text" name="price" class="form-control" placeholder="{{labels.enterPrice}}" disabled/>
<span class="mz-validationmessage hidden" data-mz-validationmessage-for="price">{{labels.genericRequired}}</span>
</td>
</tr>
</tbody>
</table>
I have the following HTML table.
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>
</td>
</tr>
</tbody>
</table>
When I click on the button with class "btn green", I generate a new row by making use of a delegated event handler as follows.
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
});
However, When I create a new row, I need the "add new" button of the previous row to vanish. I can use the hide() function in jQuery, but how do I access the previous row? The following is not working.
$( row ).prev()
Can't you just hide the button which has just been clicked i.e.
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
$(this).hide();
});
You can hide() the button which is clicked using this context. Also your selector is incorrect it should be ".btn.green" instead of ".btn green"
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
//Rest of the code
});
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>
I am found something can you try this one,For more Read This one
$("#addrows").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
Try like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa- plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>
Jquery:
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
jsfiddle: https://fiddle.jshell.net/f4ux0bcs/
I have a simple HTML table setup to look like a sudoku board. Each cell is a input with type = number.
I want to use jQuery to extract all of the numbers from each cell and generate an array of arrays. The array will be formatted like this:
array = [ [1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2],
[1,2,3,4,5,6,7,8,9],
[2,3,4,5,6,7,8,9,1],
[3,4,5,6,7,8,9,1,2]]
Here is a fiddle of my general set up: Sudoku Board Fiddle
the css is taken from this answer sudoku css
Essentially the HTML is set up like this:
<table id='#table'>
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
.... x9 rows
</form>
I want to make a function with jQuery that on the click of a button, it converts each row into an array and puts each array into one array.
My approach:
Use jQuery to select the table. Loop through each table row. Nest a loop to loop over each input and append each value to arrays.
This is what I have so far (it does not work at all. It just logs an empty array, even if I populate the table with values).
var array = [];
$('button').on('click', function(){
event.preventDefault();
$('table').children('tr').each(function(){
$(this).find('input').each(function(){
array.push($(this).val());
});
});
alert(array);
});
You should have another array for each tr and after all td iterations, push that array in main array
Fiddle here
$('button').on('click', function() {
event.preventDefault();
var array = [];
$('#table').find('tr').each(function() {
var arr = [];
$(this).find('input').each(function() {
arr.push($(this).val());
});
array.push(arr);
});
console.log(array);
});
table {
margin: 1em auto;
}
td {
height: 30px;
width: 30px;
border: 1px solid;
text-align: center;
}
td:first-child {
border-left: solid;
}
td:nth-child(3n) {
border-right: solid;
}
tr:first-child {
border-top: solid;
}
tr:nth-child(3n) td {
border-bottom: solid;
}
input {
width: 30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table'>
<tr id="row1">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row2">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row3">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row4">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row5">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row6">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row7">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row8">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
<tr id="row9">
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
<button>Generate Array</button>
There are a couple of problems with your code. First, you're trying to find an element with the ID table (that's what #table targets). You don't have an element with the ID of table, so that instantly doesn't work. So you either need to give you table an ID, or change your selector to get the table. I'll suggest the latter, for now.
$('table')...
Secondly, instead of using .children(), try using the $(selector, parent) shorthand. .children() is awkward in the case of tables; it only selects direct children, and a TR is not a direct child (tbody is the direct child, even if you don't declare it in your markup). I avoid using .children(). If anything, use .find().
$('tr', 'table').each(function() { ... });
Thirdly, you are using event.preventDefault(), but you haven't passed the event paramter to your callback. You need to pass the event, like so:
$('tr', 'table').each(function(event) { ... });
You will still only end up with a 1-dimensional array, not a 2-d array like you'd require, but this fixes the problems you had with your initial code.
First point is, you haven't added id for table element. But you are taking reference of table id in function.That is how it was in fiddle code.
JS Code:
var array = [];
$('button').on('click', function(){
// event.preventDefault();
$('#table').find('tr').each(function(){
var newarr=[];
$(this).find('td input').each(function(){
newarr.push($(this).val());
console.log('newarr:'+newarr);
});
array.push(newarr);
});
console.log(array);
});
I have updated and code and the final result is printing in console.
Check it.
var array = [];
$('button').on('click', function(){
event.preventDefault();
array = [];
$('#table').find("tr").each(function(){
var row = [];
$(this).find('input').each(function(){
row.push($(this).val());
});
array.push(row);
});
console.log(array);
});
table {
margin:1em auto;
}
td {
height:30px;
width:30px;
border:1px solid;
text-align:center;
}
td:first-child {
border-left:solid;
}
td:nth-child(3n) {
border-right:solid ;
}
tr:first-child {
border-top:solid;
}
tr:nth-child(3n) td {
border-bottom:solid ;
}
input {
width:30px;
height: 30px;
}
button {
display: block;
margin: 0 auto;
height: 30px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr id="row1">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row2">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row3">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row4">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row5">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row6">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row7">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row8">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
<tr id="row9">
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
<td>
<input type="number" /> </td>
</tr>
</table>
<button>Generate Array</button>
I have table structure like this below html code. Here i have a selectbox which is populated on page load from my database, i have given a inline function on the selectbox in order to call if user changes the selectbox value.. but its not calling the jquery function onChange of selectbox .. Please can you see why?
FIDDLE
My jquery:
$(document).ready(function() {
$.fn.ActivityOptionChange = function(id) {
alert("test");
};
....
....
Html
<table cellspacing="0" class="table table-condensed TF" style="width: 100%;" id="table6">
<tbody>
<tr class="fltrow">
<td><input id="flt0_table6" type="hidden" ct="0" class="flt"></td>
<td><input id="flt1_table6" type="hidden" ct="1" class="flt"></td>
<td><input id="flt2_table6" type="hidden" ct="2" class="flt"></td>
<td><input id="flt3_table6" type="hidden" ct="3" class="flt"></td>
<td><input id="flt4_table6" type="hidden" ct="4" class="flt"></td>
<td><input id="flt5_table6" type="hidden" ct="5" class="flt"></td>
<td><input id="flt6_table6" type="hidden" ct="6" class="flt"></td>
<td><input id="flt7_table6" type="hidden" ct="7" class="flt"></td>
</tr>
<tr class="success">
<td style="width: 15%;">S.no</td>
<td style="width: 15%;">Activity Name</td>
<td style="width: 5%;">Activity Option</td>
<td style="width: 5%;">Time(HR:MIN)</td>
<td style="width:10%;">cals</td>
<td style="width: 5%;">distance</td>
<td style="width: 5%;">Unit</td>
<td style="width: 15%;">Submit</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid44"></form>
<tr id="formrowid44" class=" odd">
<td style="width:5%;">1</td>
<td style="width:25%;" class="text-capitalize">bicycling, BMX or mountain</td>
<td style="width:25%;" class="text-capitalize">-</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id44" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(44);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(44);" id="time-min-id44" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id44" value="8.5"><span id="cals-id44" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id44" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(44);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid45"></form>
<tr id="formrowid45" class=" even">
<td style="width:5%;">2</td>
<td style="width:25%;" class="text-capitalize">bicycling/biking</td>
<td style="width:25%;" class="text-capitalize">
<select name="activity_option_id" class="selectbox" onchange="$(this).ActivityOptionChange(45)" id="activity-opn-Id45">
<option value="45_4.0">10 mph or less</option>
<option value="47_6.0">10-11.9 mph, leisure, slow, light effort</option>
<option value="46_8.0">general</option>
<option value="48_16">greater then 20 mph, racing, not drafting</option>
</select>
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id45" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(45);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(45);" id="time-min-id45" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id45" value="4.0"><span id="cals-id45" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id45" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(45);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid49"></form>
<tr id="formrowid49" class=" odd">
<td style="width:5%;">3</td>
<td style="width:25%;" class="text-capitalize">unicycling</td>
<td style="width:25%;" class="text-capitalize">-</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;"><input maxlength="2" id="time-hr-id49" name="timeHrTxt" size="2" type="text" style="width:25px;text-align:center;" value="00" onkeyup="$(this).CalculateCalorie(49);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(49);" id="time-min-id49" name="timeMinTxt" placeholder=" MIN" type="text" style="width:25px;text-align:center;" maxlength="2" size="2" value="00"></div>
</td>
<td style="width:5%;" class="text-capitalize"><input type="text" style="display:none;" name="metsTxt" id="mets-id49" value="5.0"><span id="cals-id49" class="cals">0.00</span></td>
<td style="width:5%;" class="text-capitalize"> <input name="distanceTxt" id="distance-Id49" type="text" style="width:50px;text-align:center;"> </td>
<td style="width:5%;" class="text-capitalize">
</td>
<td style="width:5%;" class="text-capitalize"> <button onclick="$(this).SubmitForm(49);" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
</tbody>
</table>
Try using the jQuery .on('change') function:
$(document)ready(function() {
$('body').on('change', '#activity_option_id', function() {
alert('test');
});
});
Also see .on() jQuery Documentation
EDIT: In response to your comment: If you have multiple select boxes that you need ID's for, you can implement a class based solution:
<select id="your_id_here1" class="formSelect" />
<select id="your_id_here2" class="formSelect" />
$(document)ready(function() {
$('body').on('change', '.formSelect', function() {
var elementID = this.id;
alert(elementID);
});
});
With this solution, any select box with a .formSelect class will have the change event bound to it and the ID of the particular input element changed will be displayed in the alert box.