Avoid form multiple submissions and re-enable when done
<p>I have a form which allows to view data in a page or download it in csv according to the submit button pressed.</p>

<p>Since it's a <strong>long</strong> database query I want to avoid the user to submit more than once (you <strong>know</strong> how heavy is users' index finger on left mouse button...) to avoid database overload and also to make user more relaxed...</p>

<p>I wrote this little jQuery code to substitute submit button(s) with a <em>Processing, please wait</em> and the classic animated spinning gif</p>

<pre><code>$(document).ready(function(){
    //preload wait img
    var $waitImg = $('&lt;img /&gt;').attr('src', '/img/wait.gif')
    $('.wait').click(function(){
        $(':submit').hide();
        $(this).after($('&lt;span&gt;Processing, please wait...&lt;/span&gt;').prepend($waitImg));
    });
});
</code></pre>

<p>All works but has some drawbacks:</p>

<ul>
<li>when user sees results and then press the browser's back button he will get again the <em>Processing, please wait</em> sentence and no submit buttons (what if he just wants to edit something and make a new query)</li>
<li>after user is prompted to download the CSV file he keeps on being told to wait...</li>
</ul>

<p>Solutions could be to detect someway user is back or download stared or another way to tell him work is in progress.</p>

<p>The easier, the better.</p>
