We Keep Coding

Fill inputs that are generated dynamically with jquery while selecting an option in the select box

I have created the GUI that looks like this:
enter image description here
the code for this part is:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" id="sh" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="">Zgjedh Shërbimin</option>
<?php
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo "<option value='".$s->id ."' class='sale-select' selected='selected'> "
.$s->service_name . "</option>";
}
?>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
The rows of the table are generated dynamically with javascript, the code for generating the rows looks like this:
function addnewrow()
{
vartr = '<tr>'+
'<td><?php
echo '<select id="sh" name="service[]" class="form-control sherbimi" aria-describedby="llojisherbimit" required>';
echo '<option selected="selected" value=""> Zgjedh opsionin </option>';
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo '<option value="'.$s->id .'" class="sale-select" selected="selected"> '
.$s->service_name. '</option>';
}
echo '</select>';
?></td>'+
'<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>'+
'<td><select name="unit[]" class="form-control unit"><option value=""> Zgjidh Njësine </option><option value="cope"> Copë </option>'+
'<option value="dite">Ditë </option></select></td>'+
'<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>'+
'<td><input type="text" class="form-control quantity" name="quantity[] required"></td>'+
'<td><input type="text" class="form-control amount" name="amount[]" required></td>'+
'<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span>'+
'</tr>';
$('.detail').append(vartr);
}
I fill the select box with the data from a table using php .
What i'm trying to do is getting the data of the specified service(Sherbimet) while selecting that option in the select box and display these data in the inputs of the specified row(rows are created dynamically).
I've done it for the first row, the data is displayed well, but for the other rows it is changing result all the inputs of all the rows with the same data.
The code for this looks like this:
$(document).ready(function() {
$(document).on('change','#sh',function(e){
e.preventDefault();
var empid = $(this).val();
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
cache: false,
success: function(data) {
var a= data.description;
var b=data.price;
$('input[name="description[]"]').val(a);
$('input[name="price[]"]').val(b);
}
});
});
});

First of all try cleaning the html code inside the javascript using backticks (``) for comments
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
use proper naming syntax for functions and variables e.g addnewrow to addNewRow, always declare variables with var, const or let.
results of php code store in a javascript variable, as the php code will execute only on the server side and if you need something dynamic
from php you should use ajax otherwise it will not work. In your case
it is working as php its echo-ing out the html code that will be used
for preparing the results of a function.
the problem with your code is that you are not passing the certain elemenet that is being changed but rather you are trying to select the
element via class selectors, that one is always defaulting to the
first selector instead what you need to do is:
on the html side call the function fillData with the paramete this like:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th>
<button id="add" class="btn btn-primary" onclick="addNewRow()">+</button></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" onchange="fillData(this)" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="" disabled="disabled">Zgjedh Shërbimin</option>
<option value='1' class='sale-select'>1</option>
<option value='2' class='sale-select'>2</option>
<option value='3' class='sale-select'>3</option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
also change the addNewRow function so it includes this variable (dont forget to use your version as I removed the php stuff from here):
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
and then filldata function:
function fillData(element) {
var empid = element.value
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
success: function(data) {
$('input[name="description[]"]').val(data.description);
$('input[name="price[]"]').val(data.price);
}
});
}

how to get input value of dynamically generated input field

I have this dynamically generated html
var resultcard = `
<tr class="tr-shadow">
<td class="desc">
<span class="block ">
${Name}
</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;" />
<a>UI</a>
</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>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>
</td>
</tr>
`
container.innerHTML += resultcard;
})
the postitem function is this
function postitem(data){
console.log(data)
}
how do I get the input value for id "qty" and "price" when the submit button is clicked?

Use Jquery Form Data:
$('#myform').serializeArray();
// this method fetch all form data in array of key and value
function postitem(){
var data=$('#myform').serializeArray();
console.log(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<tr class="tr-shadow">
<td class="desc">
<span class="block ">
${Name}
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" id="qty" type="text" name="searchqty" placeholder="i.e. 20 EA" style="width: 100px;" />
<a>UI</a>
</td>
<td class="desc">
<input class="au-input au-input--sm" id="price" type="text" name="searchprice" placeholder="i.e 900" style="width: 90px;" />
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="searchreports" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="searchdatas" placeholder="Search for datas & reports..." style="width: 90px;" />
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem();">Submit</button>
</td>
</tr>
</form>

Here's an example of creating a new invisible input dynamically and show its value after clicking the submit button:
window.onload = function(){
var td = document.createElement("td");
var tr = document.getElementsByTagName("tr")[0]
tr.appendChild(td);
var new_input = document.createElement("input");
new_input.setAttribute("id", "myId");
new_input.style.display = "none";
td.appendChild(new_input);
new_input.value="my value!";
}
function postitem(){
var value = document.getElementById('myId').value;
console.log(value);
return false;
}
<table>
<tr class="tr-shadow">
<td class="desc">
<span class="block ">
${Name}
</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;" />
<a>UI</a>
</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>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>
</td>
</tr>
</table>

How to get JSON data from HTML form with backbone js

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>

Frozen Columns Vertical Scroll Issue

FIDDLE
I have written code to keep fixed first 2 columns & other columns are horizontally scrollable.
My problem is, I want a fixed height set to the table so that it is vertically also scrollable.
<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;">
<table class="table table-bordered" border="1">
<thead>
<tr class="tblHeadings">
<th class="fixCol1 headCol">
<div style="height: 40px;padding-top: 19px;">Code</div>
</th>
<th class="fixCol2 headCol">
<div style="height: 40px;padding-top: 19px;">Name</div>
</th>
<th style="width:120px;height: 54px;">Days
<input type="hidden" name="monthlyField" value="LD">
</th>
<th style="width:120px;height: 54px;">EARNG1
<input type="hidden" name="monthlyField" value="EARNG1">
</th>
<th style="width:120px;height: 54px;">EARNG2
<input type="hidden" name="monthlyField" value="EARNG2">
</th>
<th style="width:100px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixCol1">GT001
<input type="hidden" name="empID" value="1">
<input type="hidden" name="empCode" value="GT001">
</td>
<td class="fixCol2">Brock</td>
<td>
<input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT002
<input type="hidden" name="empID" value="2">
<input type="hidden" name="empCode" value="GT002">
</td>
<td class="fixCol2">John</td>
<td>
<input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT003
<input type="hidden" name="empID" value="3">
<input type="hidden" name="empCode" value="GT003">
</td>
<td class="fixCol2">Walker Ross</td>
<td>
<input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button>
</td>
</tr>
</tbody>
</table>

Since it looks like you're using Bootstrap, I took the liberty to make a Bootply demo of what you're trying to achieve.
You already had the solution really, the only thing was to apply fixed height to the table-responsive class rather than to the table class.
So I simply added height:200px; to the right class (btw, in general try to avoid in-line styling).

unable to call onChange event on select box

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.