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 .