Why I am not able to print alert message on click event of check box?
Question
Plz refer the jsfiddle link. http://jsfiddle.net/7gbNK/17/
My code is as follows:
<form action="" method="POST">
<table width="50%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname')"></td>
<td width="10%" align="center">Surname</td>
<td width="35%" style="display:none;" align="center"><input type="text" name="surname" id="surname" value-="surname" /></td>
</tr>
</table>
</form>
Following is my Javascript:
<script type="text/javascript">
function enable(id,name)
{
alert("hi");
$(document).on('change','#'+id, function()
{
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('#surname').fadeIn(100);
}
else {
$('#surname').fadeOut(100);
}
});
}
</script>
Why i am not getting alert here. Thanks in advance.
3 answers
solution1
1 2013-10-11 07:46:21
Multiple problems in your code.
1) You're using jQuery v1.6
But .on() belong to 1.7+ update the jQuery version or use .bind()
2) alert(Hi) // missing to add quotes
3)You can assign change event within click event, but change event will occur only after the 2nd time when you click the checkbox . so keep them separately.
Finally your code should look like
function enable(id, name) {
alert('hi');
}
$(document).on('change', '#chk_surname', function () {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if (checked) {
$('.td_surname').eq(index).fadeIn(100);
} else {
$('.td_surname').eq(index).fadeOut(100);
}
});
solution2
1 ACCPTED 2013-10-11 07:50:08
There are two problems,
- Select No wrap - In in second drop down
- hi is supposed to be a variable wrap in quotes to make it string.
Change
alert(hi);
To
alert('hi');
solution3
-2 2013-10-11 07:46:58
The problem is that the enable function is not defined -yet-, Try placing it above the html.
<head>
<script type="text/javascript">
function enable(id,name)
{
alert("hi");
$(document).on('change','#'+id, function()
{
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('#surname').fadeIn(100);
}
else {
$('#surname').fadeOut(100);
}
});
}
</script>
</head>
.
.
.
<form action="" method="POST">
<table width="50%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname')"></td>
<td width="10%" align="center">Surname</td>
<td width="35%" style="display:none;" align="center"><input type="text" name="surname" id="surname" value-="surname" /></td>
</tr>
</table>
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.