Jump to content

show after using back button

ann

By ann
in Javascript Help

 Share

Recommended Posts

ann Member

ann

Posted
Posted
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]
Link to comment
Share on other sites
ann Member

ann

Posted
  • Author
Posted
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
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.