Problems Disabling an Input Button

[JavaTheHut]

I'm having problems disabling an input button via JavaScript on my html form.

I'm using the following tag to create an html button with a specified image to display on my html form:

<input name="postButton" type="image" src="./Post.jpg" onClick="savePost()" disabled>

I have another text field on this html page that I want to enable the postButton when it loses focus via a call to a javascript function:

function enablePost(){
document.form.postButton.disabled=false;
}

But everytime the text field loses focus I get an IE error stating that the postButton object does not exist or is null.

But what I found is that if I change the input tag that defines my button to:

<input name="postButton" type="button" onClick="savePost()" disabled>

The functionality works correctly, but then I lose my image source that I wanted.

Anyone know how to resolve this issue???

[olerag]

how about changing ...

function enablePost(){
document.form.postButton.disabled=false;
}

to...

function enablePost(){
document.forms[0].postButton.disabled=false;
}

if a button is what u want...

[JavaTheHut]

I still get the same problem. It appears as though if you use an input tag and define the type as "image", than IE doesn't recognize it as an object of that document for whatever reasons.

I've tried using the <button> tag with the following:
<button name="postButton" type="button" disabled><img src="./Post.jpg"></button>

I was able to get it to disable and enable correcty using this tag, but now I have a problem with the grey button border surrounding my image.
:(

[olerag]

If what you are looking for is an image that may or may
not be disabled, I believe you would have to load the
image you want (one that appears enabled and another
with a disabled appearance). For activation, use the
anchor tag; an image is not a <form> object.

I do not believe HTML currently possesses a means by
which a button can be substituted as an icon to give you
the enabling/disabling affect your after.

[Jona]

Just make one function to enable/disable the form from being submitted--they can still select a text input and press enter if you disable your submit button.


function enableForm(returnVal)
{
document.forms[0].onsubmit=function() {return returnVal};
}


In this way, you can call the function with a boolean (true or false) value:


enableForm(true); // enable form
enableForm(false); // disable form


[J]ona

[olerag]

I think what he's trying to do is overlay an image over a
button in a manner similar to assigning an icon to the
button (like in Swing) to get the enabling/disabling affects
of the button component.

I don't believe this is possible in HTML but maybe some
CSS folks know how to do this.

If I'm wrong then please disregard.

[Jona]

Then why not change the SRC of the image to a grayscale version when the button is disabled, and set style="border: none;"?

[J]ona

[olerag]

Works for me. So aren't you talking about loading one of two
separate images (colored represents enabled; greyscale
is disabled) or is this coloring/greyscale affect accomplished
with the same image??

And, I still don't know if he wants to use an anchor or a
form object (I think, the later) for the activation process,
whatever it may be.

[JavaTheHut]

Thanks for the advice. Let me try implementing the grey scale today and see what happens.