Comments on: Clear form with JavaScript

By: dbunic

dbunic — Wed, 04 Jan 2012 09:55:42 +0000

@Kala - Well, is the tricky one. Field value cannot be changed or reset (without doing a full form reset) for security reasons. Possible workaround could be to completely delete element from the form and to add it again - simply just replace it

Here is link to http://stackoverflow.com/ with suggested solution in jQuery but it can be without jQuery as well.

By: Kala

Kala — Thu, 29 Dec 2011 04:32:08 +0000

Can you please tell me how to clear the value if input type="file"

By: ahmad balavipour

ahmad balavipour — Thu, 10 Nov 2011 08:51:50 +0000

Thanks a lot, very good code.

By: dbunic

dbunic — Sun, 29 May 2011 11:31:02 +0000

@harika - This clearForms() JavaScript function is exactly what you need. It will clear all form elements on the page. Just call clearForms() function in case of wrong input and form elements will be cleared.

In the meantime, clearFields function is verified with JSLint - now code looks clean and correctly indented.

By: harika

harika — Thu, 26 May 2011 10:28:47 +0000

I want code for clear a form before submit. Suppose if I enter anything wrong then I need to clear all fields in JavaScript.
Please give reply fast.

By: writer jobs

writer jobs — Tue, 05 Apr 2011 12:17:29 +0000

Thanks Man! that's help me a lot! If options are deleted from multiple-select then "clear-form" loop should not add previously deleted items ...

By: Sol

Sol — Tue, 07 Sep 2010 22:20:46 +0000

This worked as a charm.. thanks a mil for sharing...

By: dbunic

dbunic — Wed, 23 Jun 2010 12:34:24 +0000

@Ravi - clearing form should not affect adding or removing options in select or multiple-select. Loop goes through all multiple-select options and sets "selected" property to "false". If options are deleted from multiple-select then "clear-form" loop should not add previously deleted items ...

By: Ravi

Ravi — Tue, 22 Jun 2010 09:00:01 +0000

Hi its nice article but how can I remove the list box items. I have the code as follows

else if (FormName.elements[i].type == 'select-multiple') {
	for (index = FormName.elements[i].options.length - 1; index >= 0; index--) {
		FormName.elements[i].options.remove(index);
	}
}

It is working fine in removing the elements but if i add new element after clearing, again previous elements are adding to the listbox...

By: Manjula

Manjula — Tue, 25 Aug 2009 04:36:16 +0000

Nice article. Thank you for sharing.