<tr>
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Area_of_Achievement">Artistic Field(s) in which nominee has made significant achievements and impact</a>*:</td>
function show(me)
{
var im = me || document.getElementById("Artform_Nominee_Other");
if(im.checked)
document.getElementById("text").style.display="table-row";
else
document.getElementById("text").style.display="none";
}
<tr>
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Area_of_Achievement">Artistic Field(s) in which nominee has made significant achievements and impact</a>*:</td>
I have also written an example of making a table row visible.
Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Onine Resources</title>
<script type="text/javascript"></script>
function doStuff(control)
{
if(control.checked)
{
document.getElementById("Div1").style.display = 'block';
}else
{
document.getElementById("Div1").style.display = 'none';
}
}
function showTable(control)
{
if(control.checked)
{
document.getElementById("secondRow").style.display = 'inherit';
}
else
{
document.getElementById("secondRow").style.display = 'none';
}
}
</head>
<body>
<div id="contentDiv">
<form>
<input type="checkbox" name="myCheckBox" onclick="doStuff(this)"> Show Div <br/>
<input type="checkbox" name="check2" onclick="showTable(this)"> Show Table <br/>
</form>
<div id="Div1" style="position: relative; left: 30px; top: 30px; height: 100px; width: 100px; background-color: red; display:none;">hello</div>
<table id="myTable" style="width: 300px; border: 1px solid red; height: 400px;">
<tr id="firstRow">
<td> This is the first row
</td>
</tr>
<tr id="secondRow" style="display:none;">
<td> This is the second row
</td>
</tr>
</table>
</div>
</body>
</html>
Copy and paste that into an html page or notepad and run it with IE8+
Junior1012
Member
76 Points
178 Posts
show up textbox when I checkbox tick
Nov 20, 2012 08:13 AM|LINK
Hi,
Please, can anyone advice me how to do that.
I tried too many ways but did not show up.
Here is my code:
<tr>
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Area_of_Achievement">Artistic Field(s) in which nominee has made significant achievements and impact</a>*:</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
Film <input type="checkbox" name="Artform_Nominee" value="Film"/>
Literary Arts <input type="checkbox" name="Artform_Nominee" value="Literary Arts"/>
Dance <input type="checkbox" name="Artform_Nominee" value="Dance"/>
Music <input type="checkbox" name="Artform_Nominee" value="Music"/>
Theatre <input type="checkbox" name="Artform_Nominee" value="Theatre"/></br>
Visual Arts <input type="checkbox" name="Artform_Nominee" value="Visual Arts"/>
Others <input type="checkbox" name="Artform_Nominee" value="Others" onclick="show()">
</td>
</tr>
<tr style="display:none" id="text" name="txt" onclick="show()">
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Scope">Scope*:</a>
</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
<input type=""text"" name=""Scope_Nominee_Others"" value="""" size=""70"" class=""formfield""/>
</td>
</tr>
JavascriptScript
function show(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
raju dasa
Star
14746 Points
2499 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 09:02 AM|LINK
Hi,
check this code:
Others <input type="checkbox" name="Artform_Nominee" id="Artform_Nominee_Other" value="Others" onclick="show(this)"> function show(me) { var im = me || document.getElementById("Artform_Nominee_Other"); if(im.checked) document.getElementById("text").style.display="table-row"; else document.getElementById("text").style.display="none"; }rajudasa.blogspot.com || blog@opera
Junior1012
Member
76 Points
178 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 10:11 AM|LINK
Hi,
It did not change anything as well when I change your code.
Please, can anyone help me or advice me why it can't show up.
Thanks in advanced.
Others <input type="checkbox" name="Artform_Nominee" id="Artform_Nominee_Other" value="Others" onclick="show(this)">
<tr style="display:none" id="text" name="txt">
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Scope">Scope*:</a>
</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
<input type=""text"" name=""Scope_Nominee_Others"" value="""" size=""70"" class=""formfield""/>
</td>
</tr>
function show(me) { var im = me || document.getElementById("Artform_Nominee_Other"); if(im.checked) document.getElementById("text").style.display="table-row"; else document.getElementById("text").style.display="none"; }roopeshreddy
All-Star
20271 Points
3346 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 10:21 AM|LINK
Hi,
You are referring to the type instead of id
<input type="text" id="chk" name="Scope_Nominee_Others" value="" size="70" class="formfield"/> document.getElementById("chk").style.display="table-row"; else document.getElementById("chk").style.display="none";Hope it helps u...
Roopesh Reddy C
Roopesh's Space
Junior1012
Member
76 Points
178 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 10:52 AM|LINK
Hi,
Even I change id that you mension it still not work out.
Please, can anyone help me or give me anyidea for the right one. Thanks alot.
<tr style="display:none" name="txt">
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Scope">Scope*:</a>
</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
<input type="textbox" name="Scope_Nominee_Others" id="txt" value="" size="70" class="formfield"/>
</td>
</tr>
Others <input type="checkbox" name="Artform_Nominee" id="Artform_Nominee_Other" value="Others" onclick="show(this)">
function show(me)
{
var im = me || document.getElementById("Artform_Nominee_Other");
if(im.checked)
document.getElementById(txt).style.display="table-row";
else
document.getElementById(txt).style.display="none";
}
info2ambrish
Member
385 Points
275 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 11:08 AM|LINK
try this
<tr>
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Area_of_Achievement">Artistic Field(s) in which nominee has made significant achievements and impact</a>*:</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
Film <input type="checkbox" name="Artform_Nominee" value="Film"/>
Literary Arts <input type="checkbox" name="Artform_Nominee" value="Literary Arts"/>
Dance <input type="checkbox" name="Artform_Nominee" value="Dance"/>
Music <input type="checkbox" name="Artform_Nominee" value="Music"/>
Theatre <input type="checkbox" name="Artform_Nominee" value="Theatre"/></br>
Visual Arts <input type="checkbox" name="Artform_Nominee" value="Visual Arts"/>
Others <input type="checkbox" name="Artform_Nominee" value="Others" onclick="show()">
</td>
</tr>
<tr style="display:none" id="text" name="txt" onclick="show()">
<td width="28%" bgcolor="#F4F4F4" valign="top">
<a name="Scope">Scope*:</a>
</td>
<td width="72%" bgcolor="#F4F4F4" valign="top">
<input type=""text"" name=""Scope_Nominee_Others"" value="""" size=""70"" class=""formfield""/>
</td>
</tr>
JavascriptScript
function show(chk,txt)
{
if(document.getElementById(chk).checked)
$('#txt').show();
else
$('#txt').hide();
}
jawed_akhtar...
Member
328 Points
82 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 11:34 AM|LINK
Hi,
Place you show/hide content in <div> instead on <tr> and add unique to div.
Finally Show/hide that <div>.
raju dasa
Star
14746 Points
2499 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 11:48 AM|LINK
Hi,
The code is working fine at my end, tested in Firefox.
(If u notice, i have added id attribute to the checkbox, previously)
check this whole code:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <script> function show(me){ var im = me || document.getElementById("Artform_Nominee_Other"); if(im.checked) document.getElementById("text").style.display="table-row"; else document.getElementById("text").style.display="none"; } </script> </head> <body> Others <input type="checkbox" name="Artform_Nominee" id="Artform_Nominee_Other" value="Others" onclick="show(this)"> <table> <tr style="display:none" id="text" name="txt"> <td width="28%" bgcolor="#F4F4F4" valign="top"> <a name="Scope">Scope*:</a> </td> <td width="72%" bgcolor="#F4F4F4" valign="top"> <input type="text" name="Scope_Nominee_Others" value="" size="70" class="formfield"/> </td> </tr> </table> </body> </html>rajudasa.blogspot.com || blog@opera
PashBash
Member
371 Points
81 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 12:53 PM|LINK
Input tags need to placed inside a form tag
<form>
</form>
Also because you are only using HTML you need to not close the input tags like you would in XHTML.
In HTML input tags do not need to be closed.
<html> <head> <title> My Page </title> <script type="text/javascript"> function doStuff(control) { if (control.checked) { document.getElementById("Div1").style.display = 'block'; }else { document.getElementById("Div1").style.display = 'none'; } </script> </head> <body> <form> <input type="checkbox" name="myCheckBox" value="Click Me" onclick="doStuff(this)"> </form> <div id="Div1" style="position: relative; left: 10px; top: 10px; width: 100px; height: 100px; background-color: red; display: none;">hello world!</div </body> </html>PashBash
Member
371 Points
81 Posts
Re: show up textbox when I checkbox tick
Nov 20, 2012 03:01 PM|LINK
If you need some more help have a look at this.
http://www.w3schools.com/cssref/pr_class_display.asp
I have also written an example of making a table row visible.
Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Onine Resources</title> <script type="text/javascript"></script> function doStuff(control) { if(control.checked) { document.getElementById("Div1").style.display = 'block'; }else { document.getElementById("Div1").style.display = 'none'; } } function showTable(control) { if(control.checked) { document.getElementById("secondRow").style.display = 'inherit'; } else { document.getElementById("secondRow").style.display = 'none'; } } </head> <body> <div id="contentDiv"> <form> <input type="checkbox" name="myCheckBox" onclick="doStuff(this)"> Show Div <br/> <input type="checkbox" name="check2" onclick="showTable(this)"> Show Table <br/> </form> <div id="Div1" style="position: relative; left: 30px; top: 30px; height: 100px; width: 100px; background-color: red; display:none;">hello</div> <table id="myTable" style="width: 300px; border: 1px solid red; height: 400px;"> <tr id="firstRow"> <td> This is the first row </td> </tr> <tr id="secondRow" style="display:none;"> <td> This is the second row </td> </tr> </table> </div> </body> </html>Copy and paste that into an html page or notepad and run it with IE8+