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>

Edit Question

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 .

Edit Answer

jignesh posted

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

shyam answered Nov 30 '-1 00:00

Related Questions

Insert link

Insert image

shyam
answered Nov 30 '-1 00:00