禁用按钮呼叫服务器，然后重新启用按钮

Question

I've seen many similar questions to mine, but have spent a few hours browsing and can't find the answer to my situation.

I have a Go based web-server. I have an HTML template page that lets me update the hardware clock and system clock on a 'nix system with the current browser time:

The update button is of type submit and calls the Go code which makes some system calls which take a few seconds, and I can't have this server code being called twice whilst it's still processing the first request.

So I want to disable the update button and then re-enable it once the server has responded.

I have jQuery, so I know I can have a function that is called via `onclick' and make these calls:

$("#updateButton").prop("disabled", true);
$("#updateButton").prop("disabled", false);

I have the form being submitted via the button (and not a jQuery call for instance - although I'm all ears) because I want the form to refresh when the server responds. So I have this:

<form action="/clock" method="POST">
    ...
</form>

This is so some values on the page get updated. Such as the status message at the top and the values in the various fields (updated to the values actually set).

The first problem I have is that if I call a JS function on the button click, and it disables the button as per above, then my server code doesn't get called! I have no idea why - could this be stopping the post request somehow?

<script>
function getTime() {
    // Disable update button while waiting for response
    $("#updateButton").prop("disabled", true); // Stops post request???

    // How to re-enable update button?

}
</script>

And secondly, how do I re-enable the button? I don't know how to tell when the server has responded.

Answer 1

Since you're saying you want to disable the submit button once the button is clicked. And you're also saying you want the page to refresh while the form is being submitted.

<form action="" method="post" onsubmit="subBtn.disabled = true; return true;">
    <input type="submit" name="subBtn" value="submit"/>
</form>

In the code above, when <form> is submitted, <input> field named subBtn is disabled and true is returned for <form> to continue the submission process. Once the page is reloaded, the button goes to its original state, which is enabled.

---

I am not sure whats going on the code down there or how/when is getTime() function executed, but return true; might just submit the form.

<script>
function getTime() {
    $("#updateButton").prop("disabled", true);
    return true; // this to continue with the original <form> process
}
</script>