Asked 8 years ago
19 Dec 2016
Views 4437
jignesh

jignesh posted

form submission button should be disable untill input type file is empty

How can i hide / disable submit button at form until input type file is empty.

<form  >
<input type="file" name="filename" id="filename" />
<input type="submit"  name="save"  value="save" id="save" />
</form>


shyam

shyam
answered Nov 30 '-1 00:00

1. DISABLE BUTTON UNTIL INPUT FILE IS EMPTY

Html Form ::

 <form  >
<input type="file" name="filename" id="filename" />
<input type="submit"  name="save"  value="save" id="save" disabled="true" />
</form>

i made button by default disabled . it will enable when type file value change empty to proper file path.

JS code

$(document).ready(function () {
$("#filename").on('change',function(event){
 		filename=$(this).val();
    if(filename!==''){
    $("#save").attr('disabled',false);
 
})
});

we use here on change event .
and getting file name value and checking if empty or not value .

2. HIDE BUTTON UNTIL INPUT FILE IS EMPTY

Html Form::

 <form  >
<input type="file" name="filename" id="filename" />
<input type="submit"  name="save"  value="save" id="save" style="display:none" />
</form>

style="display:none" hide button at default load .

JS code

$(document).ready(function () {
$("#filename").on('change',function(event){
 		filename=$(this).val();
    if(filename!==''){
    $("#save").css('display','block');
 }
})
});


on selection of file by change event . it will set display:block by $("#save").css('display','block');
or you can set also display:inline by $("#save").css('display','inline');


ABOVE CODE IS BASED ON THE Jquery . so dont forget to import it .


Post Answer