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">
<p>Date:</p>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autoplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest › Oldest</label>
<br>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autoplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest › Newest</label>
<hr><br>
<p>Title:</p>
<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>
<br>
<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>
<br>
<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>
</form>
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:
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
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 autoplete off
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">
<p>Date:</p>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="dateasc" autoplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'dateasc') echo ' checked="checked"';?> /> <label for="dateasc">Newest › Oldest</label>
<br>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="datedesc" autoplete="off" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'datedesc') echo ' checked="checked"';?> /> <label for="datedesc">Oldest › Newest</label>
<hr><br>
<p>Title:</p>
<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>
<br>
<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>
<br>
<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>
</form>
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:
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
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 autoplete off
Share Improve this question edited Jul 29, 2016 at 16:26 vaibhavmande 1,1119 silver badges17 bronze badges asked Jul 29, 2016 at 15:33 Andy RAndy R 3792 gold badges6 silver badges18 bronze badges3 Answers
Reset to default 4by using jQuery prop() you checked or unchecked the radio button easily .
$('Radio-button').prop('checked', false);
By using JavaScript you have to do like this
document.getElementById("Radio-button").checked=false
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"),
x=inputs.length;
document.querySelector("button[type=reset]").addEventListener("click",function(event){
while(x--)inputs[x].checked=0;
event.preventDefault();
},0);<form>
<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>
<hr>
<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>
<hr>
<button type="reset">Clear</button>
</form>you can use
<form action="" class="form" method="post">
on javascript you should use
$(document).ready(function(){
$(".form input[type=radio]").each(function () {
$(this).prop('checked', false);
});
});
check here on jsfiddle