show up textbox when I checkbox tick : The Official Microsoft ASP.NET Forums

Reply

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>

</tr>

JavascriptScript

function show(chk,txt)

{

if(document.getElementById(chk).checked)

document.getElementById(txt).style.display='';

else

document.getElementById(txt).style.display='none';

}

Reply

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";
}

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera

Marked as answer by Junior1012 on Nov 21, 2012 12:49 PM

Reply

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";
}

Reply

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...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Marked as answer by Junior1012 on Nov 21, 2012 12:49 PM

Reply

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";
}

Reply

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>

</tr>

JavascriptScript

function show(chk,txt)

{

if(document.getElementById(chk).checked)

$('#txt').show();

else

$('#txt').hide();

}

Reply

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>.

Reply

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>

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera

Marked as answer by Junior1012 on Nov 21, 2012 12:49 PM

Reply

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>

Marked as answer by Junior1012 on Nov 21, 2012 12:49 PM

Reply

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+

show up textbox when I checkbox tick RSS

12 replies

Junior1012

show up textbox when I checkbox tick

raju dasa

Re: show up textbox when I checkbox tick

Junior1012

Re: show up textbox when I checkbox tick

roopeshreddy

Re: show up textbox when I checkbox tick

Junior1012

Re: show up textbox when I checkbox tick

info2ambrish

Re: show up textbox when I checkbox tick

jawed_akhtar...

Re: show up textbox when I checkbox tick

raju dasa

Re: show up textbox when I checkbox tick

PashBash

Re: show up textbox when I checkbox tick

PashBash

Re: show up textbox when I checkbox tick

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft