Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it possible to retain form radio selections using the back button?
    text
    copied!<p>The user can select a radio button and depending on which radio button is selected, an input field can show asking for additional information. The user submits the form; then say they need to go back and make a change to the form. When they go back, the input field is no longer showing but the correct radio button is selected. </p> <p>The answer only needs to work in IE8+. Using jQuery as part of the solution is also an option. </p> <p>--==UPDATED 7/31/2012 using the jQuery plugin simsalabim ==--</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;!---&lt;script src="sisyphus.min.js"&gt;&lt;/script&gt;---&gt; &lt;script type="text/javascript" src="https://raw.github.com/simsalabim/sisyphus/master/sisyphus.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $('#form1').sisyphus(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; function ToggleColorOptions(el) { if (el == 'Std') { $('#Option1').show(); $('#Option2').hide(); } else if (el == 'Non') { $('#Option1').hide(); $('#Option2').show(); } } &lt;/script&gt; &lt;form id="form1" action="myTesta.cfm" method="post"&gt; &lt;input name="StdRNonStdOption" type="radio" id="StdRNonStdOption_std" onclick="ToggleColorOptions('Std');" value="Std" /&gt; Standard &lt;br /&gt; &lt;input name="StdRNonStdOption" type="radio" id="StdRNonStdOption_non" onclick="ToggleColorOptions('Non');" value="Non" /&gt; Non-Standard &lt;br /&gt; &lt;div id="Option1" style="display:none;"&gt; &lt;select name="ThisColor" &gt; &lt;option&gt;&lt;/option&gt; &lt;option&gt;Blue&lt;/option&gt; &lt;option&gt;Green&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div id="Option2" style="display:none;"&gt; &lt;input name="ThisColor" type="text" size="20" maxlength="51" /&gt; &lt;/div&gt; &lt;input type="submit" value="Save" /&gt; </code></pre> <p> </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload