PDA

Click to See Complete Forum and Search --> : Making Form Elements Hide or Visible using CheckBox (Checked / UnChecked)

samoiz
04-28-2003, 04:18 AM
Can i have javascript code for making form elements visible / Hide when a checkbox is checked.
pyro
04-28-2003, 07:20 AM
Try this:

<html>
<head>
<title>Checkbox Demo</title>

<script language="javascript" type="text/javascript">

function showhide(frm) {
if (frm.mycheckbox.checked == true) {
document.getElementById("mytext").style.visibility = "visible";
}
else {
document.getElementById("mytext").style.visibility = "hidden";
}
}

</script>
</head>

<body>
<form name="myform">
<input name="mycheckbox" type="checkbox" value="shown" onClick="showhide(this.form)" checked>
<input id="mytext" name="mytext" type="text">
</form>
</body>
</html>
kbocalet
04-28-2003, 12:26 PM
Hi guys, I'm new to javascript and I'm having a problem with something similar to this. I also need to show/hide some elements but instead of checkboxes I'm using radio buttons and the thing is when I first load the page I set a default value for the radio button and I show the appropriate elements. If the user change the value of the radio button, another elements should be showed. Then the user can submit the form and it takes it to a verification page. My problem is that if the user goes back to the first page, the elements showed are the ones for the default value. Here is the code I'm using:

var sTipoSolicitud = "Transferencia";

function TipoSolicitud(dato)
{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sTipoSolicitud = dato;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Hides all elements */
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Beneficiario.style.display = "none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BancoIntermediario.style.display = "none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BancoBeneficiario.style.display = "none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InfoAdicional.style.display = "none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beneficiario_cheque.style.display = "none";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cuenta_deposito.style.display = "none";

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (dato=="Transferencia")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Shows elements for Transferencia */
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Beneficiario.style.display = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BancoIntermediario.style.display = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BancoBeneficiario.style.display = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;InfoAdicional.style.display = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (dato=="Deposito")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cuenta_deposito.style.display = "";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beneficiario_cheque.style.display = "";
}


Then on the radio button definition, this is what I have:

<input type="radio" OnClick="javascript:TipoSolicitud(this.value);" value="Transferencia" checked name="TIPO_SOLICITUD" tabindex="1">Transfer
<input type="radio" OnClick="javascript:TipoSolicitud(this.value);" name="TIPO_SOLICITUD" value="Deposito" tabindex="3">Deposit
<input type="radio" OnClick="javascript:TipoSolicitud(this.value);" name="TIPO_SOLICITUD" value="Cheque" tabindex="2">Check


I know that since I'm initializing sTipoSolicitud = "Transferencia" that's why it is using the default to show/hide the elements and what I need is a way to initialize it to whatever the user has chosen before!

As I said, I'm new, not only to javascript but web development, I'd really appreciate any help.

Thank you very much,

Karla