Jump to content

Archived

This topic is now archived and is closed to further replies.

ann

show after using back button

Recommended Posts

Hi

I've got a php search page with javascript show/hide depending on the selected inputs.  The java script currently hides everything on load which is fine for the first visit but when a user clicks the back button after a search the options are hidden even though the selections/inputs are remembered. 

See <a href="http://www.nematodes.org/test_js7.php">example</a> make any input you like then 'search' and 'browser back button'.  The radio button you selected will still be selected but the details for it are hidden. Click the radio again to see the details you input.

What I want is...
If it exists, get the value of the radio called 'in' and use it to deterimine show/hide for the relevant <div>.

Thus the start of my script would be someting like. 

[code]< script type="text/javascript"><!--
window.onload=function() {
unless 'in' exists 'in'=5;
objblast=document.getElementById('BLAST'); if (in!=0) {objblast.className='hide';}[/code]

How do I determin if 'in' exists and get the value of it?

Many thanks if you can help

The code for the whole page...
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title> www.nematodes.org - the Home of Nematode and Neglected Genomics in the Blaxter Lab </title>
<!-- InstanceEndEditable -->
</head>
<body>


<style type="text/css"> <!--.show {display:block;}.hide {display:none;}--></style>
< script type="text/javascript"><!--
window.onload=function() {
objblast=document.getElementById('BLAST');objblast.className='hide';
objblast2=document.getElementById('BLAST2');objblast2.className='hide';
objgo=document.getElementById('GO');objgo.className='hide';
objkegg=document.getElementById('KEGG');objkegg.className='hide';
objec=document.getElementById('EC');objec.className='hide';
objdom=document.getElementById('DOM');objdom.className='hide';
objsim=document.getElementById('simi');objsim.className='hide';
objbit=document.getElementById('bit');objbit.className='hide';
objexp=document.getElementById('exp');objexp.className='hide';
rad=document.getElementsByTagName('input');
for(c=0;c<rad.length;c++) {
if(rad[c].name=='in') {rad[c].onclick=function() {
if(this.value==0) {objblast.className='show';objblast2.className='show';objgo.className='hide';objkegg.className='hide';objec.className='hide';objdom.className='hide';blst=0;}
else if (this.value==1) {objblast.className='hide';objblast2.className='hide';objgo.className='show';objkegg.className='hide';objec.className='hide';objdom.className='hide';blst=1;}
else if (this.value==2) {objblast.className='hide';objblast2.className='hide';objgo.className='hide';objkegg.className='show';objec.className='hide';objdom.className='hide';blst=2;}
else if (this.value==3) {objblast.className='hide';objblast2.className='hide';objgo.className='hide';objkegg.className='hide';objec.className='show';objdom.className='hide';blst=3;}
else if (this.value==4) {objblast.className='hide';objblast2.className='hide';objgo.className='hide';objkegg.className='hide';objec.className='hide';objdom.className='show';blst=4;}
else {objblast.className='hide';objblast2.className='hide';objgo.className='hide';objkegg.className='hide';objec.className='hide';objdom.className='hide';blst="";}
}}
if(rad[c].name=='out') {rad[c].onclick=function() {if(this.value==0) {
objsim.className='hide';
if(blst==0) {objblast2.className='show';}
}
else {objsim.className='show';objblast2.className='hide';}
}}
if(rad[c].name=='datatype') {rad[c].onclick=function() { if(this.value==0) {objbit.className='show';objexp.className='hide';}
if(this.value==1) {objbit.className='hide';objexp.className='show';}
}}
}
}
//--></script>

<div class="mainTitle">Search for sequences with specified annotations</div><br>

<div class="mainMed">Use the form below to set key words and parameters for searching the available sequence annotations in Nembase3.</div>

<br><br>

<form method="post" action="test.php">
<table class="tablephp2">
<tr>
<td>
<table width=100%>
<tr class="mainBig">
<td width=200>Annotation</td>
<td>Details</td>
</tr>
<tr height=20></tr>
<tr>
<td valign="top"><input type="radio" name="in" value=0>Blast hit description</td>
<td id="BLAST">
<table>
<tr>
<td width=400 valign="top"><input TYPE="checkbox" NAME="prog[]" checked VALUE="blastx">BLASTX (protein hits)&nbsp&nbsp&nbsp<br><input TYPE="checkbox" NAME="prog[]" VALUE="blastn">BLASTN (nt hits)&nbsp&nbsp&nbsp</td>
<td width=400 valign="top"><input type="text" name="blstxt">search text</td>
<td width=300 valign="top"><input type="text" style="width:40px;" name="scoretxt">Minimum e-value</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><input type="radio" name="in" value=1>GOtcha description</td>
<td id="GO">
<table>
<tr>
<td width=400 valign="top"><input TYPE="radio" NAME="go" VALUE="0" checked>Description<br>
<input TYPE="radio" NAME="go" VALUE="1">GO id(ie GO:0006950 )
</td>
<td width=400 valign="top"><input type="text" name="gotxt">search text</td>
<td width=400 valign="top"><input type="text" style="width:40px;" name="conf">min confidence (1-100)</td>
</tr>
<tr><td colspan=3>This search is very slow!!  I'm working on speeding it up.
</table>
</td>
</tr>
<tr>
<td valign="top"><input type="radio" name="in" value=2>KEGG</td>
<td id="KEGG">
<table>
<tr>
<td width=400 valign="top"><input TYPE="radio" NAME="kegg" VALUE="0" checked>Description<br>
<input TYPE="radio" NAME="kegg" VALUE="1">pathway<br>
<input TYPE="radio" NAME="kegg" VALUE="2">number
</td>
<td width=400 valign="top"><input type="text" name="keggtxt">search text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><input type="radio" name="in" value=3>Enzyme Commission</td>
<td id="EC">
<table>
<tr>
<td width=400 valign="top"><input TYPE="radio" NAME="ec" VALUE="0" checked>description<br><input TYPE="radio" NAME="ec" VALUE="1">number</td>
<td width=400 valign="top"><input type="text" name="ectxt">search text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><input type="radio" name="in" value=4>Domain</td>
<td id="DOM">
<table>
<tr>
<td width=400 valign="top"><input TYPE="radio" NAME="ip" VALUE="0" checked>Interpro description<br><input TYPE="radio" NAME="ip" VALUE="1">Domain ID</td>
<td width=400 valign="top"><input type="text" name="iptxt">search text</td>
</tr>
</table>
</td>
</tr>
</table>
<table width=100%>
<tr>
<td width=200>  <!--show this cell always with this content-->
<div><div class="mainBig">Output by:</div>
<label><input type="radio" name="out" value=0 checked />table of sequences</label><br>
<label><input TYPE="radio" NAME="out" VALUE=1 />as SimiTri</label><br><br><br>
</div>
</td>
<td valign=top>  <!--show this cell with variable content-->

<table width=400 id="BLAST2"> <!--show this div if out==0 i.e. table of clusters-->
<tr>
<td>
<div class="mainBig">Order results by</div>
<input TYPE="radio" NAME="order" VALUE="0" checked>sequence abunance<br>
<input TYPE="radio" NAME="order" VALUE="1" >blast e-value
</td>
<td>
<div class="mainBig">Report</div>
<input TYPE="radio" NAME="hits" VALUE="0" checked>all hits<br>
<input TYPE="radio" NAME="hits" VALUE="1">1st hit only
</td>
</tr>
</table>

<div id="simi"><table> <!--show this div if out==1 i.e. simitri-->
<tr>
<td width=400> <!--while out==1 show this cell always with this content-->
<div class="mainBig">Select data type</div>
<label><input TYPE="radio" NAME="datatype" VALUE=0 />blast bit score</label><br>
<label><input TYPE="radio" NAME="datatype" VALUE=1 />sequence expression</label><br><br><br>
</td>
<td valign="top" width=800> <!--while out==1 show this cell with variable content-->
<div id="bit"><div class="mainBig">Select databases to compare</div><? include ("simi_bit_db_selector.php"); ?></div> <!--while out==1 show this div if datatype==0 i.e. bitscore-->
<div id="exp"><div class="mainBig">Select data groups to compare</div><? include ("simi_exp_db_selector.php"); ?></div> <!--while out==1 show this div if datatype==1 i.e. expression-->
</td>
</tr>
</table></div>

</td>
</tr>
<tr height=20></tr>
<tr>
<td colspan=3 valign=top>
<center><input TYPE="submit" VALUE="Search"></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>


</body>
</html>
[/code]

Share this post


Link to post
Share on other sites
I assume you mean a form element? document.formName.elements.objectName.

Share this post


Link to post
Share on other sites
Thanks

Did you mean document.[b]forms[/b].formName.elements.objectName ?

Anyway while I was trying to get that to work I dicovered 'in' is reserved so i changed it to 'varin', gave my form the id "varform" and discovered document.forms.varform.varin[0].checked which was just what I needed so the start of the script now looks like...

[code]< script type="text/ javascript">< !--
window.onload=function() {
objblast=document.getElementById('BLAST');
if (document.forms.varform.varin[0].checked){} else{objblast.className='hide';}
objblast2=document.getElementById('BLAST2');
if (document.forms.varform.varin[0].checked && document.forms.varform.out[0].checked){} else{objblast2.className='hide';}
objgo=document.getElementById('GO');
if (document.forms.varform.varin[1].checked){} else{objgo.className='hide';}
[/code]

Cheers

Share this post


Link to post
Share on other sites
Yeah, I did mean to use the .forms collection too... and "in" is reserved for iterating through hashes.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.