Patriotec Patriotec - 1 month ago 14
HTML Question

Clear file input field after file selected using JQuery on select change

Using a Jquery plugin called filestyle from: http://www.appelsiini.net/projects/filestyle. I have a select box with an id of adtype. If the selected option has a value of 7, it'll disable the file input with the id of 'adfile'.

The problems becomes when a user has already selected a file. I cant find a way to clear the file input and then disable it. $('#adfile').val(''); does not work.

JQUERY

$(function(){
$('#adtype').change(function(){
if($('#adtype option:selected').val()==="7"){
$('#adfile').val('');
$("#adfile").prop('disabled', true);
}else{
$("#adfile").prop('disabled', false);
}
});
});


HTML

<form id="someform" action="somepage" method="post">
<select name="selectstuff" id="adtype">
<option value="1">one</option>
<option value="5">five</option>
<option value="7">seven</option>
</select>

<input type="file" id="adfile" value="" />

<input type="submit" value="submit" />
</form>

Answer

I used $('#adfile').val(''); and $('#adfile').attr('disabled', 'disabled');

DEMO

NOTE: filestyle plugin removes id,name attributes from the file input element and adds file as class. I'm accessing this element with reference to the form.

Hope this helps