Note that there are some explanatory texts on larger screens.

plurals
  1. POBrowser back-button when a list of values selection
    text
    copied!<p>I'm trying to keep the list of values from drop-down selections when the browser back-button is click after the form has been submitted. I tried using Ben Alman's bbq jquery, but failed to get things working. <a href="http://jsfiddle.net/FQP9Q/7/" rel="nofollow">Here's</a> what I've been trying. Please help.</p> <p>Many thanks in advance.</p> <p>HTML</p> <pre><code>&lt;form action="something.py" id="formName"&gt; &lt;table id = "tabName"&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Number&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select id="myname" name="myname"&gt; &lt;option value="a"&gt;a&lt;/option&gt; &lt;option value="b"&gt;b&lt;/option&gt; &lt;option value="c"&gt;c&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select id="mynumber" name="mynumber"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="submit" value="submit" /&gt; &lt;/form&gt; </code></pre> <p>JQuery:</p> <pre><code>var selected_value = []; $('#mynumber').change(function() { var name = $('#myname').val(); var number = $('#mynumber').val(); $("#tabName tr:last").before("&lt;tr&gt;&lt;td&gt;" + name + "&lt;/td&gt;&lt;td&gt;" + number + "&lt;/td&gt;&lt;/tr&gt;"); selected_value.push(name); }); $('#formName').submit(function() { $.bbq.pushState({ values: selected_value }); //return false; }); $(window).bind("hashchange", function(e) { var values = $.bbq.getState("url"); if (selected_value === values) { $(this).addClass("current"); } else { $(this).removeClass("current"); } }); </code></pre>
 

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