Making form elements hide/show with radio buttons and a little extra! Please, help.

[kbocalet]

Hi guys, I'm new to javascript and I need to show/hide some elements based on the value of a radio button. The little extra is that 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)
{
     sTipoSolicitud = dato;
     /* Hides all elements */
     Beneficiario.style.display = "none";
     BancoIntermediario.style.display = "none";
     BancoBeneficiario.style.display = "none";
     InfoAdicional.style.display = "none";
     beneficiario_cheque.style.display = "none";
     cuenta_deposito.style.display = "none";

     if (dato=="Transferencia")
     {
       /* Shows elements for Transferencia */
       Beneficiario.style.display = "";
       BancoIntermediario.style.display = "";
       BancoBeneficiario.style.display = "";
       InfoAdicional.style.display = "";
     }
     else
       if (dato=="Deposito")
         cuenta_deposito.style.display = "";
       else
         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 to javascript and I'd really appreciate any help.

Thank you very much,

Karla

[kbocalet]

Thanks Dave. I had looked at the threads but in all fairness hadn't searched well enough (as I found out later). I've spent the whole day checking old posts and I've found the link to your send_form.

http://www.daveclarkconsulting.com/research/send_from.html

I've actually tried it and works just wonderful and solves part of my problem (thanks by the way). I can set a different value from the previous page instead of hardcoding the default value but.... I couldn't find anything regarding the back. I have two pages, A and B. In page A I enter some values including the one from the radio button. Based on the radio button selection, some input fields are shown or hidden. So far, so good, I can do that. But the problem with the back thing remains....

Here is what I did.

I included the code similar to the one in your send_form example to read in page A the default value for the radio button. The value of the radio button is "value1". Then the user changes the value to "value3" and the fields in the form are shown/hidden appropriately. Then the user submits the form and is taken to page B.

Page B is a confirmation page of the data entered in page A thus it's very likely the user will want to go back and fix data. And here is my problem, when it goes back to A, it displays everything as if the radio button value was "value1" although the user has changed it to "value3" and the radio button shows the correct value.

I hope I've made it somewhat clear, my problem is when the user goes back from B to A because (thank's to your example, thanks thanks thanks and many thanks) when I go to A from the beginning it works just fine.

I'm using self.location to get the values from the variables but it has the values from the first calling to A, I guess I would need self.location for B when it goes back to A? I'm so confused! please, help!!!!!! I've been learning javascript for the last few days but I'm still so so so ignorant! :(

Thanks,

Karla

[kbocalet]

Here is how it is going back from B to A

<p><a href="javascript:history.back(1);">Back</a></p>

and when I go back to A the values are correctly shown on the screen but I haven't found where to check for the radio button value to show/hide the apropriate elements. I tried on window onload but it says the value is "undefined"? probably because IT IS loading...

Instead of working with the pages full of code I decided to go back to basics and try it with two test pages that kind of replicates what I have.

Page A:

<html>

<head>
<script language="javascript">


function ShowHide(dato)
{
sButton = dato;
// Hides all text boxes
document.forma.T1.style.display = "none";
document.forma.T2.style.display = "none";
document.forma.T3.style.display = "none";

// Shows one text box depending on the radio button value
if (dato=="V1")
{ document.forma.T1.style.display = ""; }
else
{ if (dato=="V2")
{ document.forma.T2.style.display = ""; }
else
{ if (dato=="V3")
{ document.forma.T3.style.display = ""; }
}
}
}

</script>




</head>

<body LANGUAGE=javascript>

<form name="forma" method="GET" action="OpcionesVerifica.asp" >
<table cellspacing="15">
<td><input type="radio" name="R1" value="V1" OnClick="javascript:ShowHide(this.value);">Opcion 1</td>
<td><input type="radio" name="R1" value="V2" checked OnClick="javascript:ShowHide(this.value);">Opcion 2 </td>
<td><input type="radio" name="R1" value="V3" OnClick="javascript:ShowHide(this.value);">Opcion 3</td>
</table>

<p><input type="text" name="T1" size="20" style="display=none" value="Texto 1"></p>
<p><input type="text" name="T2" size="20" value="Texto 2"></p>
<p><input type="text" name="T3" size="20" style="display=none" value="Texto 3"></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

</body>

</html>






Page B (it is an asp that only displays what is received from Page A):

<html>

<head>
<title>Verify Data</title>

</head>

<body>
<p>Button value = <%=request("R1")%></p>
<p>Text 1= <%=request("T1")%></p>
<p>Text 2= <%=request("T2")%></p>
<p>Text 3= <%=request("T3")%></p>
<p><a href="javascript:history.back(1);">Back</a></p>
</body>

</html>



What I need is when I chose the first value for the radio button on page A, to show T1 then go to page B with submit. Then when I go back from B to A to still display T1 instead of T2 but haven't found where to call the ShowHide function after it goes back to A to acomplish this.

Thanks for your time!

Karla

[kbocalet]

an error? I was testing the on-something events and had Language=javascript onload="dosomething();", so I guess I deleted the onload part and forgot about the Language thing. Does this mess up something?

Thanks,

Karla