Andy R Andy R - 4 years ago 81
PHP Question

Clear radio buttons of a submitted form

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 clear filters button nothing happens.

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?

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

The Code:

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

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

These are the methods I have tried so far:

Method 1:
Gave the form the standard html reset button just before the closing form tag.

Method 2:
Added this line just before the closing form tag:

<input type="button" onclick="myFunction()" value="Reset form">

Added this script after the closing form tag:

function myFunction() {

Method 3:
Within the body tag added
<body onload="document.refine.reset();">
and gave the form the name refine.

Method 4:
Set input fields to autocomplete off

Answer Source

Your attempts to reset the form to its initial state are actually working but the problem is that, because you are submitting the form every time you click on an input, the page and, therefore, the form are being reloaded and the last clicked input now has an initial state of checked. So, what you need to do is to loop through all the checked inputs and "uncheck" them. Here's a trimed down example of one way of doing so:

var inputs=document.querySelectorAll("input[type=radio]:checked"),
    <input id="option1a" name="option1" type="radio" value="a"><label for="option1a">Option 1A</label>
    <input checked id="option1b" name="option1" type="radio" value="b"><label for="option1b">Option 1B</label>
    <input id="option1c" name="option1" type="radio" value="c"><label for="option1c">Option 1C</label>
    <input id="option2a" name="option2" type="radio" value="a"><label for="option2a">Option 2A</label>
    <input checked id="option2b" name="option2" type="radio" value="b"><label for="option2b">Option 2B</label>
    <input id="option2c" name="option2" type="radio" value="c"><label for="option2c">Option 2C</label>
    <button type="reset">Clear</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download