How can I disable submit button until document is attached to browser?

Question

I want the user to attach a file in a browser before allowing a user to click submit. I want disable the submit button when the file is not attached and enable submit button when a file is attached using javascript

Jsp:

    <tr id="app[0]" >
                    <td class="xl" width="50%" id="app1">
                        <input type="file" name="employeeDischargeTO.appraisalFile[0]" size = "30" contentEditable ="false"/>                                                           
                    </td>
</tr>

<td width="6%" align="right">
<a onclick="fnSubmit('<%=Constants.SUBMIT_BUTTON%>')" onmouseover="fnShowHand(this)"><html:img page="/images/b-HrSubmit.gif" border="0" align="middle"/></a>
</td>

When the submit link (which should be a button) is clicked, [check with javascript wether a file is selected or not](http://stackoverflow.com/questions/46219/how-to-determine-if-user-selected-a-file-for-file-upload) — Douwe de Haan, May 03 '17 at 19:45
onmouseover is not really great from an accessibility perspective, it's better to avoid event listeners like this. — Nikita Chernykh, May 03 '17 at 20:18

score 0 · Answer 1 · answered May 03 '17 at 19:53

1) add to your button "disabled" attribute
2) add function to

<input id='img' type='file' onchange='attachment(event)'/>

3)add script for that event

<script>
    function attachment(evt){
        var files = evt.target.files;
        //code for checking if evt have any files
        //if yes then remove "disabled" from the button
        //if no then exit if statement and do nothing
    }
</script>

something similar should work.. hope this helps and gives some idea:)

How can I disable submit button until document is attached to browser?

1 Answers1