PDA

View Full Version : If Checkbox is checked then show text box

tanpl3
10-29-2004, 10:28 AM
:eek: if there any way for this situation using javascript
if the checkbox is checked then the table row, the "Guarantee No", ":" and input box will show.

else hide it

<table border="0" width="344">
<tr>
<td width="338" align="left" colspan="3" height="12"></td>
</tr>
<tr>
<td width="122" align="left" height="22">Purpose Code</td>
<td width="16" align="center" height="22">:</td>
<td width="167" height="22">
<input type = text name ="txtPurCode" tabindex= 25 size="20"></td>
</tr>
<tr>
<td width="122" align="left" height="20">Guarantor</td>
<td width="16" align="center" height="20">:</td>
<td width="167" height="20">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c()"></td>
</tr>

<tr>
<td width="122">Guarantee No</td>
<td width="16">:</td>
<td width="167">
<input type = text name ='txtGRTNo' tabindex = 19 size="20"></td>
</tr>
<tr>
<td width="338" align="left" colspan="3" height="12"></td>
</tr>
</table>
Mr J
10-29-2004, 11:17 AM
Here's one possibility


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script>
<!--
function c(){}


function test(){
if(document["f1"]["chkGuar"].checked){
document.getElementById("myrow").style.visibility="visible"
}
else{
document.getElementById("myrow").style.visibility="hidden"
}
}
//-->
</script>
</HEAD>
<BODY>

<FORM NAME="f1">
<table border="1" width="344">
<tr>
<td width="338" align="left" colspan="3" height="12"></td>
</tr>
<tr>
<td width="122" align="left" height="22">Purpose Code</td>
<td width="16" align="center" height="22">:</td>
<td width="167" height="22">
<input type = text name ="txtPurCode" tabindex= 25 size="20"></td>
</tr>
<tr>
<td width="122" align="left" height="20">Guarantor</td>
<td width="16" align="center" height="20">:</td>
<td width="167" height="20">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c() ; test()"></td>
</tr>

<tr id="myrow" style="visibility:hidden">
<td width="122">Guarantee No</td>
<td width="16">:</td>
<td width="167">
<input type = text name ='txtGRTNo' tabindex = 19 size="20"></td>
</tr>
<tr>
<td width="338" align="left" colspan="3" height="12"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
Sayonara
10-29-2004, 11:29 AM
Errr... isn't that backwards? Checking the box hides the row.

Fix by swapping "visible" and "hidden" in the javascript function, and changing style="visibility:visible" for style="visibility:hidden" in the table row.
fci
10-29-2004, 11:31 AM
switch "hidden" and "visible"
Sayonara
10-29-2004, 11:32 AM
switch "hidden" and "visible"
Also needs a change to the HTML - see my edit --^
Sayonara
10-29-2004, 11:36 AM
In fact, it would be better to use display:none, otherwise the hidden row leaves a stonking great gap.
fci
10-29-2004, 12:41 PM
In fact, it would be better to use display:none, otherwise the hidden row leaves a stonking great gap.

I had to look up that word..
To bombard with intense artillery fire src (http://www.allwords.com/word-stonk.html)

* tells everyone to put the weapons down *
Mr J
10-29-2004, 05:11 PM
The key words here guys are;


Here's one possibility


The script is open to amendments as tanpl3 requires. :thumbsup:

The reason I did not use "display" was because it moves the contents when switching from "none" to "block" so I thought nah ...... :D

Still, I have to admit to getting the visibility thing arse upwards :o

Silly me!
Sayonara
10-29-2004, 05:16 PM
I saw "Here's one possibility" but I chose to ignore it in the interests of promoting a good stonking.


I tested with display: none/inline and it worked fine.

Bizarrely, tested with display none/table-row and it went kablooie.
Mr J
10-29-2004, 05:19 PM
Stonkings good! :D


Stonking = UK SLANG

used to emphasize how good something is:

"We had a stonking good time at the party last night"
kosmo
12-14-2004, 02:25 AM
hi folks,

I'm new to this forum, but already very impressed. I've searching for code that does this for a while now, over the web. This is the only place I've found that can do.

However, tho I can get it work stand-alone. I can't get it work in an page running asp code. I've cut & paste the code. Am I missing something???

thanks

***************************************************
In the HEAD:
<script>
<!--
function c(){}

function quantity(){
if(document["f1"]["Upg_Select"].checked){
document.getElementById("myQuan").style.visibility="visible"
}
else{
document.getElementById("myQuan").style.visibility="hidden"
}
}
//-->
</script>


In the BODY:
<form method="POST" action="cart.asp" target="cart" onsubmit="return FrontPage_Form1_Validator(this)" name="f1">

...

<tr>
<td><font face="Verdana" size="2"><input type="checkbox" name="Upg_Select" value="<%=i%>" onclick = "c() ; quantity()"> <%=oRs("Upgrade")%>
</td>
<td id="myQuan" style="visibility:hidden"><font face="Verdana" size="2"><input type=text size=3 name="quantity">(Qty)</font></td>
<td><font face="Verdana" size="2"> ... $<%=FormatNumber(oRs("Price"),2)%></td>
</tr>
***************************************************