We Keep Coding

helpicon functionality on form element using Jquery

I am having below form with helpIcon for every form element with description.
How we can show help when we are hover on help icon and mouseout using jquery?
I am quit new for jquery. so please can someone give simple implementation?
<table>
<tbody>
<tr><td>
Name:
</td>
<td>
<input type="text" name="name" class="dipika">
</td>
<td>
<img src="help.png" id="imgNamehelp">
</td>
<td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td>
</tr>
<tr><td>
Color:
</td>
<td>
<input type="radio" value="red" name="Color" class="dipika"> Red
<input type="radio" value="yellow" name="Color" class="dipika"> Yellow
</td>
<td>
<img src="help.png" id="imgColorhelp">
</td>
<td><div id="divColorhelp" style="display: none;"> This is color choice</div></td>
</tr>
<tr><td>
Hobbies:
</td>
<td>
<input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket
<input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi
</td>
<td>
<img src="help.png" id="imgHobbieshelp">
</td>
<td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
<tr><td>
Address:
</td>
<td>
<textarea class="dipika"></textarea>
</td>
<td>
<img src="help.png" id="imgAddresshelp">
</td>
<td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
</tbody>
</table>
Can anybody help with this issue? Thanks in advance.

$(document).ready(function(){
$('img[src="help.png"]').mouseover(function(){
$('#'+getDivId(this)).fadeIn(500);
}).mouseout(function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});

$(document).ready(function(){
$('img[src="help.png"]').hover(function(){
$('#'+getDivId(this)).fadeIn(500);
},function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});

Cannot disable the textboxes with jquery

I could enable the textboxes as I click on the radio button using jquery. But I am not getting as to how to disable them if radio button is changed.
JSFiddle
http://jsfiddle.net/2LCnC/
HTML
<table>
<tr class="jsRadioMasterSlaveContainer">
<td>
<input type="radio" name="radioMultiSelectCheckbox" class="jsRadioMaster" value=""> Upto N random selection count
</td>
<td style="padding: 3px;">
<input type="text" placeholder="Count" id="" style="width:80px" class="jsRadioSlave" disabled/>
</td>
</tr>
<tr class="jsRadioMasterSlaveContainer">
<td>
<input type="radio" name="radioMultiSelectCheckbox" id="" value="" class="jsRadioMaster"> Fixed selection count
</td>
<td style="padding: 3px;">
<input type="text" name="" placeholder="Count" id="" style="width:80px" class="jsRadioSlave" disabled/>
</td>
</tr>
<tr class="jsRadioMasterSlaveContainer">
<td>
<input type="radio" name="radioMultiSelectCheckbox" id="" class="jsRadioMaster"> Fixed index selection count
</td>
<td style="padding: 3px;">
<input type="text" placeholder="Count" id="" style="width:80px" class="jsRadioSlave" disabled/>
</td>
</tr>
</table>
Jquery
$(".jsRadioMaster").each(function() {
$(this).click(function() {
HandleMasterRadioChange($(this));
});
});
function HandleMasterRadioChange(masterRadio) {
$(masterRadio).closest(".jsRadioMasterSlaveContainer").find(".jsRadioSlave").each(function() {
$(this).attr("disabled", !$(masterRadio).is(':checked'));
});
}

You can use prop(propertyName, function) and return boolen based on radio in same row
$(".jsRadioMaster").change(function() {
$('.jsRadioSlave').prop('disabled',function(){
return !$(this).closest('tr').find('.jsRadioMaster').prop('checked')
})
});
DEMO

Trying to find previous DOM elements and get input value jquery

I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>

The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>

I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});

Accessing elements of class="input-append"

I'm using class="input-append" in <tr> so each row contains different inputs, and i have a button to append new inputs row,
<tr class="input-append">
<td>
<span>Person {{$index+1}}</span>
</td>
<td align="center">
Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</tr>
for example:
ID,Name,Age , when i click the button a new row will be added. how i can access the inputs in javascript ?!! for example i want to access the Age in the second row.
regards.

Use document.getElementsByClassName() and QuerySelector
trs = document.getElementsByClassName("input-append");
personName = trs[1].querySelector("input[ng-model='person.name']").value;
personAge = trs[1].querySelector("input[ng-model='person.age']").value;
and your html
<table>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name"> Age: <input type="text" ng-model="person.age">
</td>
</td>
</tr>
<tr class="input-append" >
<td>
<span>Person {{$index+1}}</span></td>
<td align="center">Time From: <input type="text" ng-model="person.name" value="testName"> Age: <input type="text" ng-model="person.age" value="testAge">
</td>
</td>
</tr>
</table>
See demo: http://jsbin.com/xemehoxono/edit?html,js,output

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.