Access the element before the current element in jQuery - javascript

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/

Related

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>

How to Show Form Post data on same page Asynchronously (without refreshing page)?

i am working on small project.. In one module, i need to do some entries using multiple forms. and i need that added form data(respective table data) to be displayed in same page after adding each value.
So, that user will get to know what data he inserted.
Pls look at the code.
<div class="container">
<div class="row">
<br><br>
<h4> School Name: <?php echo $sn; ?>
</h4>
</div>
</div>
<div class="container col-md-offset-1 col-md-7">
<h3>Budget/Students Count:</h3>
<br>
<ul class="nav nav-tabs">
<li class="active">K6</li>
<li>K7</li>
<li>K8</li>
<li>K9</li>
<li>K10</li>
<li>K11 SC</li>
<li>K12 SC</li>
<li>K11 NSC</li>
<li>K12 NSC</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form name="add_name" id="add_name" class="col-md-5">
<table class="table" id="dynamic_field">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
<td><label style="font-size:10px;"></label></td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu1" class="tab-pane fade">
<form name="add_name1" id="add_name1" class="col-md-5">
<table class="table" id="dynamic_field1">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu2" class="tab-pane fade">
<form name="add_name2" id="add_name2" class="col-md-5">
<table class="table" id="dynamic_field2">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
Script:
$(document).ready(function() {
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
$(function() {
var i = 1;
$("#add").click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#add1").click(function() {
i++;
$('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
$('#submit1').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name1').serialize(),
success: function(data) {
alert(data);
$('#add_name1')[0].reset();
}
});
});
In section.php i have written sql query insertion.
Now what i need is, i need this entered data to be displayed in same page. and table should be updated every time when i add new value.

$.ajax({
type:"GET",
url:"path/to/file",
data: 'your data',
success:function(html){
$('.response').html(html); //this return response to your page
}
})

Send data out of visible form only

I have two divs containing same input fields. When I enter the vales in both the div fields, all the values get submitted. what I want is, only the value of selected div (using radio button) should pass. Any help will be appreciated :-)
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
$("#percentagePolicyDiv").get(0).reset();
} else if (this.value == '1') {
$("#fixedPolicyDiv").css("display", "none");
$("#fixedPolicyDiv").get(0).reset();
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

You can add the disabled property to the inputs you do not want to sent.
for exemple :
$("#percentagePolicyDiv").find('input').prop('disabled');

If reset() is not only JS method you accept, we can make it with setting value of input fields such way:
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#percentagePolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
} else if (this.value == '1') {
$("#fixedPolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "none");
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Otherwise you should implement desired ID to <form> elements.
formObject.reset() is JS method of FORM-object

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.

Categories