clear file input field using jQuery

Question

Possible Duplicate:
Blank out a form with jQuery

I am using a jQuery function to clear all my form values.

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

the problem with above function is it does not reset the file input field. is there anyway i could extend the function and make it to work with clearing file input field as well.

here is file input field HTML code i am using.

<section><label for="productimg">Picture<br></label>
    <div><input type="file" id="productimg" name="productimg"></div>
</section>

thank you..

Jayendra · Accepted Answer · 2011-10-14T15:20:28.347

12

Try using the form reset, to get back to the initial values -

$('#form_id').each(function(){
    this.reset();
});

Demo - http://jsfiddle.net/hPytd/ & http://jsfiddle.net/hPytd/1/

edited Oct 14 '11 at 15:20

answered Oct 14 '11 at 15:01

Jayendra

52,349
4
80
90

there is no as such reset() function in jquery – Ibrahim Azhar Armar Oct 14 '11 at 15:05
Works with each function. Demo attached and reset does exist. – Jayendra Oct 14 '11 at 15:10
tried using this code and it does not work `$('form').each(function() { this.reset(); });` – Ibrahim Azhar Armar Oct 14 '11 at 15:18
1

works that way also - http://jsfiddle.net/hPytd/1/ – Jayendra Oct 14 '11 at 15:20
not sure, but does not work for me :( – Ibrahim Azhar Armar Oct 14 '11 at 15:21
you may try to put in fiddle for demo and show what does not work. And also revert the -ve 1 as it works perfectly. – Jayendra Oct 14 '11 at 15:24
i was not the one who down voted you, i appreciate your reply +1 for you. and thank you – Ibrahim Azhar Armar Oct 15 '11 at 04:22
ohk ... thanks much. Also where you able to get it working. – Jayendra Oct 15 '11 at 05:57
("#myForm").resetForm() worked for me. Thanks! – mghaoui Jul 25 '13 at 08:31

score 2 · Answer 2 · answered Oct 14 '11 at 14:58

2

You can call the native reset() method on the form element:

$('#myform')[0].reset();

answered Oct 14 '11 at 14:58

Sjoerd

74,049
16
131
175

tried this `$('form')[0].reset();` and it does not work – Ibrahim Azhar Armar Oct 14 '11 at 15:08
It does work. find the attached demo with the each function. – Jayendra Oct 14 '11 at 15:17

score 2 · Answer 3 · answered Oct 14 '11 at 15:01

2

You can replace the file input with html to do this,

 var id=$(this).attr('id');
    $(this).replaceWith("<input type='file' id='"+id+"' />");

answered Oct 14 '11 at 15:01

Jayantha Lal Sirisena

21,216
11
71
92

score 0 · Answer 4 · answered Oct 14 '11 at 14:59

0

Have you ever try adding the type file to the validation,like this:

if (type == 'text' || type == 'password' || tag == 'textarea' || type == 'file')

answered Oct 14 '11 at 14:59

Allende

1,480
2
22
39

Robert · Answer 5 · 2011-10-14T15:24:06.107

0

Depending on the full scope there are multiple methods to accomplish your desired result and they are much easier than you probably think:

Use <input type="reset" /> to reset your form

Build a .reset() function in jQuery:

jQuery.fn.reset = function(){
  $(this).each (function() { this.reset(); }); 
}

NOTE: Method 2 does work as it is a native JavaScript function.

edited Oct 14 '11 at 15:24

answered Oct 14 '11 at 15:18

Robert

8,717
2
27
34

clear file input field using jQuery

5 Answers5