emptying the textarea in IE

Question

I'm trying to empty wherever value/text in the textarea, when a file is uploaded from input. It works fine with FF and Chrome, but IE doesn't do the thing. Is there anyway to fix this?
Many thanks in advance.

$('input[type=file]').change(function(){
   $("textarea#txt_id").val('');
});

<textarea name="txt" id="txt_id" rows="8" cols="64"></textarea>

<input type="file" name="file" id="file_id" />

Have you verified that the `.change()` handler is firing? Something simple like an `alert()`? — user113716, Oct 21 '10 at 18:00
IE screws up the change event. Does it fire at all? Throw in an alert to see if you even hit the event handler. — Stefan Kendall, Oct 21 '10 at 18:01
this works just fine in IE for me (IE8).... http://jsfiddle.net/EsMtW/ — Chris Conway, Oct 21 '10 at 18:01

score 5 · Accepted Answer · edited May 23 '17 at 10:33

5

(Source: #955630)

You may need to use .html() instead of .val()

edited May 23 '17 at 10:33

Community

1
1

answered Oct 21 '10 at 18:02

drudge

35,471
7
34
45

1

That's what I was going to suggest! Or possibly `.text('')`? – Adam Oct 21 '10 at 18:05
3

No, you should use `.val()` on a ``. See [this answer](http://stackoverflow.com/questions/3964646/textarea-elem-val-vs-elem-text/3966874#3966874). – user113716 Oct 21 '10 at 18:12
There's no ambiguity about this. Using the textarea's `value` property (which is what jQuery's `val()` method does) is the only way to achieve this reliably. – Tim Down Oct 21 '10 at 22:19
The scenario is that the OP wants to change the value of a textarea. The only reliable way to do that is to change the textarea's `value` property, which is what jQuery's `val()` method does. `html()` instead changes the textarea's `innerHTML` property, which does not always work. So no, it isn't right. – Tim Down Oct 23 '10 at 01:32
What would prevent `.val()` from working with his original code? – drudge Oct 23 '10 at 02:15
The `change` event listener not being called would be my guess. Another potential cause would be having multiple elements with the same `id`. – Tim Down Oct 23 '10 at 10:05
Suggesting the method that the OP said doesn't work for him is not an answer to his question. – Allen Gingrich Oct 25 '10 at 14:22
@Allen: if that's aimed at me, then I'll point out that my comments are more useful than a wrong answer. If the OP is using `value` property (which is what jQuery's `val()` method uses) and is having a problem then something else is wrong with their code. `value` is the correct way to do it and is rock solid in all browsers. `innerHTML` (as used by jQuery's `html()` method) does not work in many circumstances (e.g. in Firefox and WebKit it will always return the initial value of the textarea, even after the user has entered some text). Try it if you don't believe me. – Tim Down Oct 26 '10 at 23:48
@Tim Down: I'm not insinuating that you are wrong, only that it doesn't seem right to answer the OP's question with the same code he already presented us. Your logic is correct, however. – Allen Gingrich Oct 27 '10 at 13:40

score 2 · Answer 2 · answered Oct 21 '10 at 18:06

I would change

 $('input[type=file]').change(function(){
   $("textarea#txt_id").val('');
});

<textarea name="txt" id="txt_id" rows="8" cols="64"></textarea>

<input type="file" name="file" id="file_id" />

to

 $('input[type=file]').change(function(){
   $("textarea#txt_id").html("");
});

<textarea name="txt" id="txt_id" rows="8" cols="64"></textarea>

<input type="file" name="file" id="file_id" />

You aren't actually modifying the 'value' attribute like in an input, only the HTML text between the textarea element.

No. Modifying the `value` property of a textarea is the only reliable way. Modifying the `innerHTML` property does not always work. — Tim Down, Oct 23 '10 at 01:33

emptying the textarea in IE

2 Answers2

Linked