SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing form fields

    I have a page with 5 sets of form fields. Each field set has a checkbox that if checked will allow users to utilize it. I want to clear the given field set when the user un-checks the check box. As you can see in the code below this method will make for a very long and cluncky script, I would like to make it more generic. If someone could point me in the right direction I would greatly appreciate it.

    Thanks
    <script>
    function clear() {
    window.document.roles.foo1.checked = '';
    window.document.roles.foo2.checked = '';
    }
    </script>
    <input onClick="clear();"type="checkbox" class="checkBox" />
    <input checked name="foo1" type="checkbox" class="checkBox" />
    <input checked name="foo2" type="checkbox" class="checkBox" />

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick example.

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript">
    function clearchecks (el) {
    	var grp = el.name;
    	var frm = document.getElementById('groups');
    	for (i=0; i<frm.length; i++) {
    		var item = frm.elements[i];
    		if (item.name.substr(0,grp.length) == grp && item.name.length == 8) {
    			if (el.checked) {
    				// do nothing
    			} else {
    				switch (item.type) {
    					case 'checkbox':
    						item.checked = false;
    						break;
    					case 'radio':
    						item.checked = false;
    						break;
    					case 'select':
    						item.selectedIndex = 0;
    						break;
    					default:
    						item.value = '';
    				}
    			}
    		}
    	}
    }
    </script>
    </head>
    <body>
    <form id="groups" onsubmit="return false">
    <input type="checkbox" name="group1" onclick="clearchecks(this)" /> - Group 1<br />
    1 - <input type="checkbox" name="group1_1" />
     - 2 - <input type="checkbox" name="group1_2" />
     - 3 - <input type="checkbox" name="group1_3" />
     - 4 - <input type="checkbox" name="group1_4" />
     - 5 - <input type="text" name="group1_5" />
     - 6 - <textarea name="group1_6"></textarea>
     - 7 - <select name="group1_7" />
    <option value="#">-None-</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>
    </form>
    </body>
    </html>
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •