partial reset of long form

L

liunx

Guest
Hi,<br />
I have a long form with three sections of questions with a checkbox or radio button next to each question. I would like the ability to "reset" each of the three sections independently (unlike the reset button which does the entire form). What would be the most efficient way to allow the user to clear their selections for each section? As a possible solution, how could I create a "Clear All Section Selections" button that would uncheck all checkboxes and deselect all radio buttons? <br />
<br />
Thanks for your help,<br />
Kim<!--content-->use java script for this.<!--content-->Originally posted by agathafroo <br />
how could I create a "Clear All Section Selections" button that would uncheck all checkboxes and deselect all radio buttons?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
fieldset { padding: 1em }<br />
</style><br />
<script type="text/javascript"><br />
function deSelectAll(frm)<br />
{<br />
var els = frm.elements;<br />
<br />
for(i=0; i<els.length; i++)<br />
if(/radio/i.test(els.type) || /checkbox/i.test(els.type))<br />
els.checked = false;<br />
}<br />
</script><br />
</head><br />
<body><br />
<form action="#" id="frm"><br />
<fieldset><br />
<legend>Basic Form</legend><br />
<input type="checkbox"><br />
<input type="radio" name="r"><br />
<input type="radio" name="r"><br />
<input type="text" value="text"><br />
<input type="button" value="Clear All Section Selections" onclick="deSelectAll(document.getElementById('frm'))"><br />
</fieldset><br />
</form><br />
</body><br />
</html><!--content-->Thanks for your help. Though the javascript code looked great and promising, I've tried tweaking it, and alas, I can't get it to do what I need to do--reset sections within a form independently. Is it possible?<br />
<br />
Here's what I've tried to do with the code--maybe this will demonstrate what I need:<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function deSelectAll(f1)<br />
{<br />
var els = f1.elements;<br />
<br />
for(i=0; i<els.length; i++)<br />
if(/radio/i.test(els.type) || /checkbox/i.test(els.type))<br />
els.checked = false;<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
<table><br />
<tr><br />
<td width="376"><br />
<br />
<p>Section 1</p><br />
<input type="checkbox" id="f1"><br />
<input type="radio" name="r"><br />
<input type="radio" name="r"><br />
<input type="button" value="Clear This Section's Selections" onclick="deSelectAll(document.getElementById('f1'))"><br />
</td><br />
</tr><br />
</table><br />
<table width="389" id="f2"><br />
<tr><br />
<td width="381"><br />
<p>Section 2</p><br />
<input type="checkbox"><br />
<input type="radio" name="r2"><br />
<input type="radio" name="r2"><br />
<input type="button" value="Clear This Section's Selections" onclick="deSelectAll(document.getElementById('f2'))"><br />
</td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html><!--content-->No problem.<br />
<br />
You'll want to change this:var els = f1.elements;To this:var els = f1.parentNode.getElementsByTagName('input');And all of these:onclick="deSelectAll(document.getElementById('f1'))"To this:onclick="deSelectAll(this)"<!--content-->Perfect! Thank you so much.<!--content-->On a second thought... <br />
<br />
Just take all of the onclick handlers out of your markup, and add this to your JavaScript:onload = function()<br />
{<br />
var inputs = document.getElementsByTagName('input');<br />
<br />
for(i=0; i<inputs.length; i++)<br />
if(/selections/i.test(inputs.item(i).value) && /button/i.test(inputs.item(i).type))<br />
inputs.item(i).onclick = function() { deSelectAll(this) }<br />
}This will automatically assign them for you, just to make everything a bit more dynamic, and to prevent the markup from being littered with tons of onclick handlers.<br />
<br />
N.B. The very logic of this entire script depends on the structure of which your markup is based upon. It'll only work in cases like:<parent><br />
<!-- some radios/checkboxes --><br />
<input ..><br />
<input ..><br />
<input ..><br />
<br />
<!-- the button that deselects them --><br />
<input ..><br />
</parent>Of course this can be easily changed, but again we want things to be dynamic.<!--content-->Thanks for the dynamic solution. The simpler the better.<br />
Related to the "parent" concept, I need to have the section Reset work even if the checkboxes are in their own table rows. The reason is because the Reset sections are part of a behemoth page with a complex multi-column grid. <br />
<br />
Is this possible?<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function deSelectAll(f1)<br />
{<br />
var els = f1.parentNode.getElementsByTagName('input');<br />
<br />
for(i=0; i<els.length; i++)<br />
if(/radio/i.test(els.type) || /checkbox/i.test(els.type))<br />
els.checked = false;<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
<table width="100%" border="0" cellspacing="0" cellpadding="4"><br />
<tr> <br />
<td width="6%"><input name="checkbox" type="checkbox" id="f1"></td><br />
<td colspan="2">option 1</td><br />
</tr><br />
<tr> <br />
<td><input name="checkbox3" <br />
type="checkbox" id="checkbox2"></td><br />
<td colspan="2">option 2</td><br />
</tr><br />
<tr> <br />
<td><input type="radio" name="r"></td><br />
<td width="43%">option 3</td><br />
<td width="51%">&nbsp;</td><br />
</tr><br />
<tr> <br />
<td colspan="3"><input name="button" type="button" value="I don't clear stuff"></td><br />
</tr><br />
</table><br />
<p>&nbsp;</p><br />
<table width="100%" border="0" cellspacing="0" cellpadding="4"><br />
<tr> <br />
<td width="6%"><input name="checkbox2" type="checkbox" id="checkbox"></td><br />
<td colspan="2">option 1</td><br />
</tr><br />
<tr> <br />
<td><input name="checkbox4" type="checkbox" id="checkbox3"></td><br />
<td colspan="2">option 2</td><br />
</tr><br />
<tr> <br />
<td><input type="radio" name="r2"></td><br />
<td width="43%">option 3</td><br />
<td width="51%">&nbsp;</td><br />
</tr><br />
<tr> <br />
<td colspan="3"><input name="button2" type="button" value="I don't clear stuff either"></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html><!--content-->
 
You must log in or register to reply here.
Back
Top