Styling a button using javascript & OnClientClick
I have an asp.net button on a web page.
The OnClientClick code disables the button so that the user cannot submit more than once. It also changes the text of the button to "Please wait..."
All good so far!
Trouble is, because it is getting disabled the "Please wait..." text looks rubbish... How can I style the button so that even though it is disabled, it looks enabled, within javascript.
<script type="text/javascript">
function btnSubmit_ClientClick(Client) {
var ok = Page_ClientValidate();
if (ok) {
Client.style.color = 'White';
Client.style.backgroundColor = '#9A4D9E';
Client.value = 'Please wait...';
Client.disabled = true;
}
}
</script>
Start of Edit:
Here's the enabled button:
and here's the disabled button:
... as you can see the text is kind of grey and white?
For further clarity @user503034 suggested using [disabled] in the CSS. Here's my code, however I still have the same issue:
button[disabled]:active, button[disabled], input[type="reset"][disabled]:active, input[type="reset"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled], select[disabled] > input[type="button"], select[disabled] > input[type="button"]:active, input[type="submit"开发者_运维问答][disabled]:active, input[type="submit"][disabled]
{
color: Green;
background-color: #9A4D9E;
cursor: default;
}
You can try this
<script type="text/javascript">
function btnSubmit_ClientClick(Client) {
var ok = Page_ClientValidate();
if (ok) {
Client.style.color = 'White';
Client.style.backgroundColor = '#9A4D9E';
Client.value = 'Please wait...';
if (Client.ClassName.indexOf("disabled")>0)
return false;
else
Client.ClassName += " disabled";
}
}
This will not disable the button completely, but it will not let you click it. Now you can style it any way you want to. If this is submit button on the form, you can also do onSubmit on the form and return false there as well, to prevent somebody just tabbing and hitting enter key. Might not be exactly what you are looking for, but it does the job.
If you want to disable the button and style it after that, use the suggestion from user503034 with one additional change, instead of just doing [disabled] in the CSS, do input[disabled="disabled"], input.disabled that will work across all major browsers.
Maybe that is what you are looking for.
精彩评论