ClearAll Input Box

@milindsaraswalaDec 29.2006

I need code When I Click to Button it should clear all inpt box and combox.listindex=-1 on the document. Can Some body help me ??

to post a comment

JavaScript

18 Comments(s) _↴

@_Aerospace_Eng_Dec 29.2006 — #<input type="reset" value="Clear All" onclick="document.forms[0].combox.selectedIndex = -1">

@so_is_thisDec 29.2006 — #Doesn't simply this work?

<input type="reset" value="Reset">

@konithomimoDec 29.2006 — #Doesn't simply this work?

<input type="reset" value="Reset">[/QUOTE]

That will only reset a form to its original state. It will not "clear" a select object, or as many people call them, a listbox.

Using selectedIndex=-1 will show the select object text as being empty, or "cleared", and add an empty option to the top of the select object, while still keeping the other options.

If the OP really wants to clear the select object though, meaning remove all of the options, then s/he will have to either set the options length to 0, or remove each option one at a time, most likely in a loop.

@so_is_thisDec 29.2006 — #That will only reset a form to its original state.[/QUOTE]
Yes, I'm aware of that -- but that is generally what people really want. Hence the reason I asked the question. No sense jumping through all the hoops if the OP would have been satisfied by the simplest of solutions.

@milindsaraswalaauthorDec 30.2006 — #i just dont need on reset button i want to use on many buttons so i need function or there is any way to call reset function call

@milindsaraswalaauthorDec 30.2006 — #

[CODE]
 function ClearForm(formIdent) 
 { 
 var form, elements, i, elm, element; 
 form = document.getElementById 
 ? document.getElementById(formIdent) 
 : document.forms[formIdent]; 
 
  if (document.getElementsByTagName)
  {
   elements = form.getElementsByTagName('input');
   for( i=0, elm; elm=elements.item(i++); )
   {
   if (elm.getAttribute('type') == "text")
   {
   elm.value = '';
   }
   }
  }
 
  // Actually looking through more elements here
  // but the result is the same.
  else
  {
   elements = form.elements;
   for( i=0, elm; elm=elements[i++]; )
   {
   if (elm.type == "text")
   {
   elm.value ='';
   }
   }
  }
 
 }
 
 function addEvent(elm, strEvent, fnHandler)
 {
 return ( elm.addEventListener
 ? elm.addEventListener( strEvent, fnHandler, false)
 : elm.attachEvent( 'on'+strEvent, fnHandler)
 );
 }
 [/CODE]

I got the from google it is working very good but i also want to put it for textarea to empty and select to selectedindex to -1

@konithomimoDec 30.2006 — #i just dont need on reset button i want to use on many buttons so i need function or there is any way to call reset function call[/QUOTE]
The reset button is just one button that when pressed resets a form to its original state. It is not one button for every element. You can also do it without a button like this:

document.myform.reset()

where "myform" is the name of the form you want to reset.

@milindsaraswalaauthorDec 30.2006 — #thing is that my form will come with data when i use reset will not clear data but come to original state . So i dont want to use that

@ricpDec 30.2006 — #Perhaps this would do the job for you.

<i>
 </i>// js
 
 <i>	</i>function clearForm(frm) {
 <i>	</i>	for (var elIdx=0;elIdx&lt;frm.elements.length;elIdx++) {
 <i>	</i>		if (frm.elements[elIdx].type!="hidden") {
 <i>	</i>			if (frm.elements[elIdx].selectedIndex) frm.elements[elIdx].selectedIndex = -1;
 <i>	</i>			else if (frm.elements[elIdx].checked) frm.elements[elIdx].checked = false;
 <i>	</i>			else if (frm.elements[elIdx].value) frm.elements[elIdx].value = "";
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>}
 
 // html
 
 <i>	</i>&lt;input type="button" value="clear all" onclick="clearForm(this.form)"/&gt;

I've set it not to clear any hidden values, you may want that though however it is easy enough to amend so it will.

Without seeing your html it's difficult to get this spot on as you may have specific requirements.

@milindsaraswalaauthorDec 30.2006 — #thanx ricp to reply but it not working and giving error that frm.elements is null. What can be solution for that.

@konithomimoDec 30.2006 — #Or since the OP asked to clear textareas, textboxes, and select objects . . . and not checkboxes . . . simply:

function clearForm(frm) {
 var els = frm.getElementsByTagName('*');
 for(var i=0;i&lt;els.length;i++)
 {
 if(els[i].type=='text'||'textarea')
 els[i].value='';
 if(els[i].nodeName=='select')
 els[i].selectedIndex=-1;
 }
 return true;
 }

@milindsaraswalaauthorDec 30.2006 — #thanx for reply [B]konithomimo[/B] it is telling me that object does not support so i replace it with document and it works. Did i do gud or there is solution for ur code

@ricpDec 30.2006 — #thanx ricp to reply but it not working and giving error that frm.elements is null. What can be solution for that.[/QUOTE]

You are not passing the correct form element back. I assumed that the button you clicked was within the <form> that it was trying to clear. That's what the this.form refers to. I did say that it was difficult to second guess you without seeing your HTML.

If the button is outside the <form> you wish to clear then you would need to pass something like...

<i>
 </i>&lt;input type="button" onclick="clearForm(document.getElementById('myFormID'))" value="clear all"/&gt;

You shouldn't really have a name attribute on your form, hence why I refer to it's id attribute in the code above.

Or since the OP asked to clear textareas, textboxes, and select objects . . . and not checkboxes . . . simply:
[/QUOTE]
Nope he didn't but he didn't mention he wanted textarea's cleared in his first post either. If you are clearing selects, inputs and the like, it's a fair assumption that all form elements are to be cleared. The thread is also called "Clear All", the emphasis being on "all".. :rolleyes:

Btw, your code is inefficient. Why are you using the .getElementsByTagName() method when formObj.elements is already available without any calls? With the former you will pick up every tag within the form, including tables, divs, images, etc. At least with the .elements collection you are restricting the number you loop through.

@konithomimoDec 30.2006 — #You are not passing the correct form element back. I assumed that the button you clicked was within the <form> that it was trying to clear. That's what the this.form refers to. I did say that it was difficult to second guess you without seeing your HTML.

If the button is outside the <form> you wish to clear then you would need to pass something like...

<i>
 </i>&lt;input type="button" onclick="clearForm(document.getElementById('myFormID'))" value="clear all"/&gt;

You shouldn't really have a name attribute on your form, hence why I refer to it's id attribute in the code above.

Nope he didn't but he didn't mention he wanted textarea's cleared in his first post either. If you are clearing selects, inputs and the like, it's a fair assumption that all form elements are to be cleared. The thread is also called "Clear All", the emphasis being on "all".. :rolleyes:

Btw, your code is inefficient. Why are you using the .getElementsByTagName() method when formObj.elements is already available without any calls? With the former you will pick up every tag within the form, including tables, divs, images, etc. At least with the .elements collection you are restricting the number you loop through.[/QUOTE]

Like you sid, the OP asked for "Clear all", and also, it doesnt matter which one I use because I check for specific element types, thus tables and divs would not be affected. I already know about the .elements array collection, but why limit yourself?

Aso, there is no reason why you shouldn't have a name attribute on a form. It makes easier to access without using getElementById(). I prefer to use IDs, but there is no reason why you shouldnt use a name.

@ricpDec 30.2006 — #Like you sid, the OP asked for "Clear all", and also, it doesnt matter which one I use because I check for specific element types, thus tables and divs would not be affected. I already know about the .elements array collection, but why limit yourself?
[/quote]
Because it's inefficient. Take for example the code had several layers of nested tables (bad html, but just for this example) then the loop will still go through them. I appreciate you are not setting values on it, but the length of the collection will be bigger and thus the processing overhead larger. It's in no way "wrong", just long winded.

The elements collection is there for the specific task of referring to form elements, not a case of limiting yourself but using the logical collection that exists within the browser already rather than making another call to the processor for the .getElementsByTagName() method.

Aso, there is no reason why you shouldn't have a name attribute on a form. It makes easier to access without using getElementById(). I prefer to use IDs, but there is no reason why you shouldnt use a name.
[/quote]
Again it's a case of "you are not wrong", but there is a very significant reason why you shouldn't use it. From the introduction of xhtml the name attribute has been deprecated on all elements barring specific elements within the form tag. If we (as a JavaScript community) are to promote standards and push forward compatibility it surely must be in the best interests to stop using such outdated methods. HTML4 is over 10 years old now and really should be resigned to the bin.

@konithomimoDec 30.2006 — #Because it's inefficient. Take for example the code had several layers of nested tables (bad html, but just for this example) then the loop will still go through them. I appreciate you are not setting values on it, but the length of the collection will be bigger and thus the processing overhead larger. It's in no way "wrong", just long winded.

The elements collection is there for the specific task of referring to form elements, not a case of limiting yourself but using the logical collection that exists within the browser already rather than making another call to the processor for the .getElementsByTagName() method.

Again it's a case of "you are not wrong", but there is a very significant reason why you shouldn't use it. From the introduction of xhtml the name attribute has been deprecated on all elements barring specific elements within the form tag. If we (as a JavaScript community) are to promote standards and push forward compatibility it surely must be in the best interests to stop using such outdated methods. HTML4 is over 10 years old now and really should be resigned to the bin.[/QUOTE]

Most of what you say is true, but just to give an example, if the user has input objects that alter the code for a table in a form, then most likely when you clear the form you would also want to clear out the table . . . you cannot do that with .elements you can however do it with getElementsByTagName('*')

There are reasons for using different methods, thus the reason why multiple, yet often similiar, methods are created.

On the subject of names being deprecated in XHTML, the name attribute, or "XHTML Name Identification Module" is available for all elements, but at times it is better to use IDs. Most commonly for elements such as <a> tags, images, or frames. Some people also think that it is better to use IDs for forms, which I agree is best, but if you read any documentation about the Name Module in XHTML you will usually come across a line saying that it is used in most instances, but replaced with the ID Module when more effective.

Unfortunately, people still use older browsers, so it is usually best to include a name and an ID attribute. That way we can cater to the needs of both newer and older browsers.

@ricpDec 30.2006 — #Most of what you say is true, but just to give an example, if the user has input objects that alter the code for a table in a form, then most likely when you clear the form you would also want to clear out the table . . . you cannot do that with .elements you can however do it with getElementsByTagName('*')
[/QUOTE]
:eek:

Right, so I am not meant to code my example to clear checkboxes because the OP didn't state he needed them, now you are saying you used .gEBTN to support the possibility that they may need to clear table cells? Madness, mucker. No offence but complete madness. Why not just load the whole DOM into a separate object and deal with each an every element on the page? I feel you are moving the goalposts to support your initial solution.. :rolleyes:

On the subject of names being deprecated in XHTML, the name attribute, or "XHTML Name Identification Module" is available for all elements, but at times it is better to use IDs. Most commonly for elements such as <a> tags, images, or frames. Some people also think that it is better to use IDs for forms, which I agree is best, but if you read any documentation about the Name Module in XHTML you will usually come across a line saying that it is used in most instances, but replaced with the ID Module when more effective.
[/quote]

From W3C:

4.10. The elements with 'id' and 'name' attributes

HTML 4 defined the name attribute for the elements a, applet, form, frame, iframe, img, and map. HTML 4 also introduced the id attribute. Both of these attributes are designed to be used as fragment identifiers.

Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.
[/quote]
([URL=http://www.w3.org/TR/xhtml1/#h-4.10]Source[/URL])

Spot that last paragraph.. ?

Unfortunately, people still use older browsers, so it is usually best to include a name and an ID attribute. That way we can cater to the needs of both newer and older browsers.
[/quote]
Sorry but the percentage usage of browsers that don't support getElementById (or document.all) runs into so many decimal points you would need Pythagoras himself to work it out. In fact I could invite every user of said browsers round to my house and give them all a beer and I'd still have some left in a six pack to toast your comment with... ?

@konithomimoDec 31.2006 — #:eek:
Right, so I am not meant to code my example to clear checkboxes because the OP didn't state he needed them, now you are saying you used .gEBTN to support the possibility that they may need to clear table cells? Madness, mucker. No offence but complete madness. Why not just load the whole DOM into a separate object and deal with each an every element on the page? I feel you are moving the goalposts to support your initial solution.. :rolleyes:

From W3C:

([URL=http://www.w3.org/TR/xhtml1/#h-4.10]Source[/URL])

Spot that last paragraph.. ?

Sorry but the percentage usage of browsers that don't support getElementById (or document.all) runs into so many decimal points you would need Pythagoras himself to work it out. In fact I could invite every user of said browsers round to my house and give them all a beer and I'd still have some left in a six pack to toast your comment with... ?[/QUOTE]

. . . yeah . . . not exactly . . . . and I was only doing the same as you when giving an example. The only reason why I did not include the checkboxes was because the user did not ask for them, but I used getElementsByTagName() in case the user needs to allow for objects other than standard form elements.

Also in #JavaScript _↴

onclick/onmousedown with IE forms jQuery cycle plugin for loop Combining jQuery script to reduce load time

Success!

Help @milindsaraswala spread the word by sharing this article on Twitter...

Tweet This

ClearAll Input Box

18 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

ClearAll Input Box

18 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #JavaScript _↴