Clear radio buttons of a submitted form
<p>I have a form with two radio button groups.  When options are selected in each group they stay selected and change colour to show they have been selected.  However, when I try to reset the form using the <strong>clear filters button</strong> nothing happens.  </p>

<p>I want the form to appear to the user as it did when it loaded for the first time (no selections, no colour change - just cleared.), any ideas?  </p>

<p>I am using the onclick:"javascript:submit()" instead of a submit button, maybe this is causing an issue?  </p>

<p><strong>The Code:</strong>  </p>

<pre><code>&lt;form action="" method="post"&gt;
        &lt;p&gt;Date:&lt;/p&gt;
            &lt;input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autocomplete="off"  &lt;?php if (isset($_POST['dateorder']) &amp;&amp; $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?&gt; /&gt; &lt;label for="dateasc"&gt;Newest &amp;rsaquo; Oldest&lt;/label&gt;
            &lt;br&gt;
            &lt;input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autocomplete="off" &lt;?php if (isset($_POST['dateorder']) &amp;&amp; $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?&gt; /&gt; &lt;label for="datedesc"&gt;Oldest &amp;rsaquo; Newest&lt;/label&gt;

        &lt;hr&gt;&lt;br&gt;    
        &lt;p&gt;Title:&lt;/p&gt;   
            &lt;input type="radio" name="title" onclick="javascript:submit()" value="Mr"  &lt;?php if (isset($_POST['title']) &amp;&amp; $_POST['title'] == 'Mr') echo ' checked="checked"';?&gt; /&gt;&lt;label for="Mr"&gt;Mr&lt;/label&gt;
            &lt;br&gt;
            &lt;input type="radio" name="title" onclick="javascript:submit()" value="Mrs" &lt;?php if (isset($_POST['title']) &amp;&amp; $_POST['title'] == 'Mrs') echo ' checked="checked"';?&gt; /&gt;&lt;label for="Mrs"&gt;Mrs&lt;/label&gt;
            &lt;br&gt;
            &lt;input type="radio" name="title" onclick="javascript:submit()" value="Miss" &lt;?php if (isset($_POST['title']) &amp;&amp; $_POST['title'] == 'Miss') echo ' checked="checked"';?&gt; /&gt;&lt;label for="Miss"&gt;Miss&lt;/label&gt;&lt;br&gt;&lt;br&gt;
    &lt;p class="clear"&gt;Clear Filters&lt;p&gt;
    &lt;/form&gt;
</code></pre>

<hr>

<p>These are the methods I have tried so far:</p>

<p><strong>Method 1:</strong> 
Gave the form the standard html <strong>reset button</strong> just before the closing form tag.</p>

<p><strong>Method 2:</strong> 
Added this line just before the closing form tag: </p>

<pre><code>&lt;input type="button" onclick="myFunction()" value="Reset form"&gt;
</code></pre>

<p>Added this script after the closing form tag:</p>

<pre><code>&lt;script&gt;
function myFunction() {
    document.getElementById("myForm").reset();
}
&lt;/script&gt;
</code></pre>

<p><strong>Method 3:</strong> 
Within the body tag added 
<code>&lt;body onload="document.refine.reset();"&gt;</code> and gave the form the name <strong>refine</strong>.</p>

<p><strong>Method 4:</strong> 
Set input fields to autocomplete off
<strong></strong></p>