Form Buttons?

[cusimar9]

Is there a straightforward way of greying out a form button once you've pressed it?

Or even a text link?

Its just annoying when users click a button/link several times because they think it'll load faster :rolleyes:

[august]

<input type="button" value="click once!" onclick="this.style.display='none'">
:)

[august]

or, where "greybutton.gif" looks like a greyed out button,

<span style="padding:0;">

<img src="greybutton.gif" width="sameOrLesserThanButtonbeneath" style="z-index: 0">

<input type="button" style="z-index: 1" value="click once!" onclick="this.parentNode.firstChild.style.zIndex='2'">

</span>

:rolleyes:

[cusimar9]

Fantastic, thanks very much! :)

[august]

your welcome.

[cusimar9]

This is what I've settled for:

function Disable(obj) {
obj.style.background = '#CCC';
obj.enabled = 'false';
}

<button type="submit" onclick="Javascript: Disable(this);">Search</button>

Works like a charm :)

[bathurst_guy]

Why not just use the disabled option...?
<input type="button" value="Click once" onclick="this.disabled = true;">

[cusimar9]

Couple of problems...

1. obj.enabled = 'false'; didn't seem to work, so I swapped it to obj.disabled = true and now the buttons won't click at all. You click them, they go grey, but they don't 'submit'.

2. If a user presses the 'back' button, the button is still greyed out/disabled?

[bathurst_guy]

1. To enable the button you do obj.disabled=false, and they do submit, you may need to add return true;

2. Why would someone want to hit back? If a user has to use the back button, it is a sign of bad web design. But, to fix this, have an onload set button to diabled=false

[cusimar9]

This is my function now:

function Disable(obj) {
obj.style.background = '#CCC';
obj.disabled = true;
return true;
}

But the button is still not submitting!

I've added navigation buttons everywhere so the user has no need to press the back button... but I know they'll still do it

[bathurst_guy]

The form is not submitting because you have an error in your code, its not due to it being disabled.
You don't even need this line, but this is how the background colour is referenced

obj.style.backgroundColor = '#ccc';

[sridhar_423]

Why not just use the disabled option...?
<input type="button" value="Click once" onclick="this.disabled = true;">

its a button element. hence when clicked doesn't submit the form.
<input type="button" value="Click once" onclick="Disable(this);">


function Disable(obj) {
obj.style.background = '#CCC';
obj.disabled = true;
document.fomName.submit();
}


or simply..
<input type="button" value="Click once" onclick="this.disabled = true;document.formName.submit();">

[bathurst_guy]

or even
<input type="submit" value="Search" onclick="this.disable = true;">

[cusimar9]

The form just refuses to submit...

Its too much work to change all my buttons to inputs... I'm sticking with onclick="this.style.display='none'" as it always works and I'm using it sparingly

[toicontien]

First, a little correction on your HTML:

<button type="submit" onclick="return Disable(this);">Search</button>

There's no need for the "javascript:" part. Secondly, you might need to tell the onclick to return a value. If that doesn't work, move this function into the FORM tag:


<form ... onsubmit="return Disable(this);">



function Disable(form) {
form.submitBtn.backgroundColor = "#CCC";
form.submitBtn.disabled = true;
return true;
}

Then get rid of any onclicks in the buttons. And also give the button you want desiabled a name of submitBtn.

[cusimar9]

Finally this worked!


<form name="mainform" id="mainform" method="post" action="" onSubmit="return Disable(document.mainform.submitBtn);">

<button type="submit" name="submitBtn">Search</button>
</form>



function Disable(obj) {
obj.style.background = "#CCC";
obj.disabled = true;

return true;
}


What a nightmare...