CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
Mike
Mike

Reputation: 11

Disabling button during upload in a form?

I have a form with a button at the end where a user can Upload a file. I would like the button to be disabled when the user clicks the Upload button until the upload is complete. Would this be simple to implement?

Upvotes: 1

Views: 2300

Answers (3)

Sabin
Sabin

Reputation: 11

Your solution has two parts. First, you want to disable the "Upload" button.

<form ... onSubmit="document.getElementById('fileThing').disabled = true;">
...
<input type="FILE" id="fileThing" size="40">
...
</form>

You can add the JavaScript part before any other JS that you might be running in that block (such as calling the AJAX script).

Next, you will need to put some code into your AJAX script that enables the button. The exact location will vary. I will assume that your AJAX script calls a function called whenComplete when it receives the full response from the server. Add the following line into that function, along with any other after-request processing code:

document.getElementById('filething').disabled = false;

You will need to figure out where exactly this line needs to go, as we can't know how your AJAX script is set up without seeing the implementation itself.

Upvotes: 0

David B.
David B.

Reputation: 314

Add this to the button.

onclick="this.disabled=true;"

Example:

<input type="submit" onclick="this.disabled=true;" />

Upvotes: 2

Dnns
Dnns

Reputation: 2844

I've never tried it before, but I think this topic could be useful: jquery/JavaScript - Delay until upload complete

Upvotes: 1

Related Questions