[Solved] clear/reset just a fieldset

[damiancds]

What I'm looking to do is have a clear/reset button in each fieldset and have them clear only the fieldset they're in. By default, a reset button resets everything on the page even if it's in a fieldset.I suppose putting each fieldset in their independent form would solve the problem, but would make submitting the information much harder than the initial problem.I'm hoping I can do this without javascript, but if I'd have to, I would just have it so the javascript cleared the current fieldset's fields, and without, it would reset everything on the page (which it currently does).any pointers?

[jeffman]

Gotta be JavaScript.Assuming the form controls in your fieldset are not nested in divs and spans and things, this will be easy.Start with your form's elements collection. This should contain ONLY input elements (incuding textareas and such). Loop through the collection. For every element it turns up, see if its parentNode is your fieldset. If it is, set the value of the element to "". If you have select elements, radio buttons, and checkboxes, better play it safe and test for what they are and set an appropriate value.If the inputs are nested, their parent will not be the fieldset, and you'll need another step. I don't have one handy, but you'll need a routine (make it a separate function) that tests whether Node A is an ancestor of Node B. Hint: there's some looping involved.

[ShadowMage]

If the inputs are nested, their parent will not be the fieldset, and you'll need another step. I don't have one handy, but you'll need a routine (make it a separate function) that tests whether Node A is an ancestor of Node B. Hint: there's some looping involved.

I did something like that once. Except I think I worked backwords of what you're saying. I passed a reference to an element and a string containing a tag name, for example: getParent('fieldset', elementReference);I then started with the reference, got it's parent node, tested for it's name, and kept looping backwards getting a new element and a new parent until the parent node name matched the string I passed.

[damiancds]

after working a little bit on it and this is what I've come up with, let me know if I'm on the right track

function clear_fieldset(currentID) //pass the buttons id so i can get the parent fieldset from it{ var obj_fieldset = document.body.getElementsByTagName(currentID).parentNode; //this gets me the fieldset and puts it into a variable for easier referencing, and I don't know if these are actual javascript comments but you get the idea for( var x = 0; x < obj_fieldset.childNodes.length; x++ ) // run through all the fieldsets elements { 	if(obj_fieldset.childNodes[x].nodeName == "INPUT") // only deals with inputs 	{	 	if(obj_fieldset.childNodes[x].type == "TEXT")	 	{	 		obj_fieldset.childNode[x].value = ""; //reset them, but it would be better if I could get the default value instead of clearing it	 	}	 	if(obj_fieldset.childNodes[x].type == "TEXTAREA")	 	{	 		obj_fieldset.childNode[x].value = "";	 	}	 	if(obj_fieldset.childNodes[x].type == "RADIO") // don't know how to reset radio or checkboxes, but right now i'm not using them	 	{	 		obj_fieldset.childNode[x].value = "";	 	}	 	if(obj_fieldset.childNodes[x].type == "CHECKBOX")	 	{	 		obj_fieldset.childNode[x].value = "";	 	}	 	if(obj_fieldset.childNodes[x].type == "BUTTON") // the clear button will always be the last element in the fieldset, so when it hits that it stops processing	 	{	 		break;	 	}	 } // end input type testing	 if(obj_fieldset.childNodes[x].tagName == "SELECT") // again don't know how to set default value, probably have to go through the options in a loop to see which one has the selected attribute	 	{	 	         // again don't know how to set default value, probably have to go through the options in a loop to see which one has the selected attribute	 	}  } //end for loop}

EDIT:Also, how would i go about calling this from the input button?, just in an onclick event, leaving the regular reset stuff so it still works without javascript?

[ShadowMage]

Also, how would i go about calling this from the input button?, just in an onclick event, leaving the regular reset stuff so it still works without javascript?

Yeah, you can just call it from an onclick event of a reset input button. Make sure that you add 'return false;' at the very end of your function though and then call your function like this:...onclick='return clear_fieldset("id");'...The return statement is necessary because if you don't have that it will perform it's normal actions (resetting the entire form). If JavaScript is disabled then it will just reset the entire form.Other than that you're on the right track with your function.To set a select's value you just need to modify its selectedIndex property. You can set it to whatever option you want. So if you have the following select:<select id='selectOne'><option value='0'>...Select One...</option><option value='1'>Option One</option><option value='2'>Option </option></select>and you want to reset it to the '...Select One...' option you just need to do the following:document.getElementById("selectOne").selectedIndex = 0;Edit:For checkboxes if you want them unchecked just set their checked property to false, true if you want them checkedRadios would be the same except you can only have one checked at a time so you might need to test their value to make sure you have the right one first.ex:

if (radioBtn.value == 'default') {   radioBtn.checked = true;} else {   radioBtn.checked = false;}

[damiancds]

I've got an old coding practice of outputting a lot for debugging and where the code stops, which seems to have helped here, only I can't find out why it's stopped

function clear_fieldset(currentID){	alert("Function Entered");	var fieldset_id = document.getElementById(currentID).parentNode.id;	alert("variable set"); if(document.getElementById(fieldset_id).hasChildNodes() == true) {	alert("Fieldset with ID: " + fieldset_id + " has " + document.getElementById(fieldset_id).childNodes.length + " children."); ****************** this pops out saying it has 15 children.... 	 for( var x = 0; x < document.getElementById(fieldset_id).childNodes.length; x++ )	 {	 	alert("FOR LOOP ITERATION " + x + "...");   ****************************************** THIS IS WHERE IT STOPS *************************************************	 		 	if(obj_fieldset.childNodes[x].nodeName == "INPUT")	 	{	 		alert("IF # A inside loop");	 		if(document.getElementById(fieldset_id).childNodes[x].type == "RESET" || document.getElementById(fieldset_id).childNodes[x].type == "SUBMIT")		 	{		 		alert("ISIDE IF # 1 INSIDE IF # A - if button");		 		break;		 				 	}		 	if(document.getElementById(fieldset_id).childNodes[x].type == "TEXT")		 	{		 		alert("ISIDE IF # 2 INSIDE IF # A - if text");		 		document.getElementById(fieldset_id).childNode[x].value = "";		 	}		 	if(document.getElementById(fieldset_id).childNodes[x].type == "TEXTAREA")		 	{		 		alert("ISIDE IF # 3 INSIDE IF # A - if textarea");		 		document.getElementById(fieldset_id).childNode[x].value = "";		 	}		 	if(document.getElementById(fieldset_id).childNodes[x].type == "RADIO")		 	{		 		alert("ISIDE IF # 4 INSIDE IF # A - if radio");		 		if (document.getElementById(fieldset_id).childNode[x].value == "default") 		 		{  					document.getElementById(fieldset_id).childNode[x].checked = true;				} 				else 				{   					document.getElementById(fieldset_id).childNode[x].checked = false;				}		 	}		 	if(document.getElementById(fieldset_id).childNodes[x].type == "CHECKBOX")		 	{		 		alert("ISIDE IF # 5 INSIDE IF # A - if checkbox");		 		document.getElementById(fieldset_id).childNode[x].checked = false;		 	}		 		 }		 if(document.getElementById(fieldset_id).childNodes[x].tagName == "SELECT")		 {		 	alert("ISIDE IF # 1 INSIDE IF # B - if select");		 	document.getElementById(fieldset_id).childNodes[x].selectedIndex = 0;		 }		 else		 {			 alert("INSIDE ELSE IN LOOP - catch all");		 }		alert("END of LOOP ITERATION " + x + "...");	 } } else { 	alert("Fieldset with ID: " + fieldset_id + " has no children."); } alert("END"); return false; alert("should not see...");}

it stops at the very first iteration (0) of the loop and i get no more alert boxes telling me if I've gone anywhere else, which my ifs/elses would have picked up.I'm gonna let this sit for tonight and check back with fresh eyes tomorrow, if you catch anything, for the love of all that is holy, please clue me in.anyway, I might get something tomorrow...

[ShadowMage]

if(obj_fieldset.childNodes[x].nodeName == "INPUT")obj_fieldset is undefined. You never set that variable to the fieldset reference.Also, when I do string comparisons like this I like to make sure that the two are the same case by using the toLowerCase() or toUpperCase() methods, unless of course my comparison has to be case sensitive. It just makes it more consistent and reliable.if(obj_fieldset.childNodes[x].nodeName.toUpperCase() == "INPUT")One other thing:if(document.getElementById(fieldset_id).childNodes[x].tagName == "SELECT")should be:if(document.getElementById(fieldset_id).childNodes[x].nodeName == "SELECT")

[damiancds]

Great advice, I honestly never thought about changing cases to compare strings in all the programming I've done, such a novel idea too.I've got everything running except for one issue, I don't know how to change the value of a text area, since that's not governed by a value attribute.

[ShadowMage]

I've got everything running except for one issue, I don't know how to change the value of a text area, since that's not governed by a value attribute.

innerHTML should take care of that. But I believe that value will work too. I think text areas are the one special exception.

[damiancds]

Well, i feel stupid.My problem was that I was checking the type for textarea after I assumed it was an input. I brought it out and checked for the nodeName and now it works perfecltyI really appreciate the help on my very first javascript function.

[ShadowMage]

Well, i feel stupid.

Meh, we all make stupid mistakes every once in a while...Glad to hear you got it all working.