JavaScript issue

[thirtythree]

So I have a form with an image for a submit button. I want to disable the submit button after someone clicks on it and switch the submit button image to something else. Basically this is what I'm doing:

<input type="image" src="1.jpg" onclick="this.disabled=true;this.form.submit();this.src='2.jpg';" />

This works in Firefox for Mac and IE 7. The image doesn't change in Firefox for PC (which isn't a huge deal--most users will be on a Mac). On Safari, the image changes to a missing image icon. The image changes fine if I remove "this.form.submit();" though... but of course the form doesn't work then.

Thanks for any suggestions.

EDIT: Oops, I thought I was in the programming forum. Can someone move this?

 

[2Xtreme21]

Make a function for it.

Assuming form is named myForm...

<input type="image" name="formImage" src="1.jpg" onclick="submitForm();" />

Later on in code...

<script language ="JavaScript">

function submitForm()
{
document.myForm.action = "whereveryouwantittogo.html";
document.formImage.src = "2.jpg";
document.myForm.formImage.disabled;
document.myForm.submit();
}

</script>

Try it and lemme know if it works.

 

[thirtythree]

Looks like the same thing with the function, it only works if I don't submit the form. I also tried adding the function to onsubmit in the form tag.

 

[skrilla]

Do you have more code than just the <input> tag? What is the form supposed to do once it is submit, go to another page?

If its just going to go off to another page, what would it matter if the submit button changes or not. Are you going for an AJAX effect?

Just trying to get a little more information.

 

[thirtythree]

Originally posted by: skrilla
Do you have more code than just the <input> tag? What is the form supposed to do once it is submit, go to another page?

If its just going to go off to another page, what would it matter if the submit button changes or not. Are you going for an AJAX effect?

Just trying to get a little more information.

It goes to a login form hosted off-site. It's a bit slow so it might take a second or two to load. I personally think people can handle waiting a second or two, but others seem to disagree 😉

 

[nakedfrog]

Do you get an error or does it just not work?

 

[thirtythree]

Originally posted by: nakedfrog
Do you get an error or does it just not work?

It just doesn't work.

 

[2Xtreme21]

Stupid question. Try doing something like:

<img src="1.jpg" onclick="this.src='2.jpg';" />

If this works, it's a problem with your .disabled method. Perhaps it can't be used in this context?

 

[thirtythree]

Originally posted by: 2Xtreme21
Stupid question. Try doing something like:

<img src="1.jpg" onclick="this.src='2.jpg';" />

If this works, it's a problem with your .disabled method. Perhaps it can't be used in this context?

That works fine, and it also works fine if I change the image and disable the button. If I throw submitting the form into the mix, it doesn't work, even if it shows up after the other two events.

 

[nakedfrog]

How about if you set up a function that does the submitting, and throw a return on it.
Like:
onclick="this.disabled=true;this.src='2.jpg';return submitForm();
Also, maybe try referencing via document.forms[0].submit()

 

[2Xtreme21]

Will the form submit if image.disabled; isn't included in the function? Will it submit if image.src="2.jpg" isn't included?

 

[thirtythree]

Originally posted by: nakedfrog
How about if you set up a function that does the submitting, and throw a return on it.
Like:
onclick="this.disabled=true;this.src='2.jpg';return submitForm();
Also, maybe try referencing via document.forms[0].submit()

Good idea, I'm surprised the separate function didn't work. Referencing differently didn't work either.

Originally posted by: 2Xtreme21
Will the form submit if image.disabled; isn't included in the function? Will it submit if image.src="2.jpg" isn't included?

I should have clarified, it's the image swap that doesn't work. Submitting always works. The swap still doesn't work if I don't disable the form.


Also, I'm not sure what was going on yesterday, but it is working in Firefox for PC, so it's working on everything I've tried except Safari. It's primarily a Mac app unfortunately. I'll see if I can find any relevant Safari bugs.

 

[brikis98]

out of curiosity... if instead of directly calling document.forms[0].submit() after changing the image source, what if you did:

setTimeout("document.forms[0].submit()", 2000);

This will have the form submit 2 seconds after you tell the image to change. Other than possible Safari bugs, the only thing I can think that would cause this issue is that when you call the submit() on the form, it begins to unload it, and the image is removed from the DOM before the new one is fetched. Adding the delay might provide enough time to fetch the new image. Total guess, but maybe worth a shot.

 

[GilletteCat]

First of all, you have correctly, but inadvertently, called your image a submit button in the first post. Because that is exactly what it is. <input type=image> behaves exactly the same as <input type=submit> BUT NOT the same as <input type=button>. Because it is a submit-type element, you do not add submit() to the onclick event. You should only be dealing with your formatting of the button style. As far as the button style goes, I would recommend, instead of disabling and swapping of the image right there within the onclick event, to have a named style class in your CSS, say "disabled_button", and just swap the className. Within the style: disabled; opacity: 50% (it would make the image nicely "grayed-out"). Don't quote me on the syntax of opacity setting (it could be transparency 🙂).
The rest is simple: <input type="image" src="1.jpg" onclick="this.className=disabled_button">

 

[thirtythree]

brikis98: No luck with that.

GilletteCat: Good idea. I don't think I can swap the image with CSS (unless I switched it to a background image), but graying it out works well enough. Here's my final code:

<input type="image" src="1.jpg" onclick="this.disabled=true;this.form.submit();" />

In the CSS:

[disabled] {
opacity: .75;
filter: alpha(opacity=75);
}

As far as I can tell, typing "disabled;" into the CSS doesn't do anything, so I did that with JavaScript. I had to add the submit part because disabling the button breaks the form and it doesn't submit otherwise. I had to add the filter part because opacity apparently doesn't work in IE7.

Last problem is if users go back in their browser the button is still disabled (in Safari and Firefox for PC). I tried changing the element to disabled=false at onload, but that doesn't work.

EDIT: Thanks for all the replies!

 

[GilletteCat]

Ok, we're almost there 🙂
You need to get rid of those calls in the onclick for things to work as intended by the gods of HTML. I would still insist on simply swapping the className. There would be a couple of them.
Here is the suggestion for the css classes (technically, the visibility is purely optional here, it would work without changing it, but just to make sure, since you are dealing with a lot of browsers):
.disabled_button
{
position: absolute;
visibility: hidden;
z-index: -1;
}
.enabled_button
{
position: absolute;
visibility: visible;
z-index: 1000;
}
HTML:
<input type="image" src="1.jpg" class="enabled_button" onclick="this.className='disabled_button'"><img src="2.jpg">

On the second subject:
you have mentioned that the button remains disabled if the users "history.go(-1)". Well, isn't it something you would desire anyway? This would preclude double submits of the same order, if this would be a shopping cart, for instance. In any case, if you are adamant about having the button enabled when the user goes back to this page, use server-side directive to set buffer to false. That would do it.

 

[thirtythree]

Originally posted by: GilletteCat
Ok, we're almost there 🙂
You need to get rid of those calls in the onclick for things to work as intended by the gods of HTML. I would still insist on simply swapping the className. There would be a couple of them.
Here is the suggestion for the css classes (technically, the visibility is purely optional here, it would work without changing it, but just to make sure, since you are dealing with a lot of browsers):
.disabled_button
{
position: absolute;
visibility: hidden;
z-index: -1;
}
.enabled_button
{
position: absolute;
visibility: visible;
z-index: 1000;
}
HTML:
<input type="image" src="1.jpg" class="enabled_button" onclick="this.className='disabled_button'"><img src="2.jpg">

On the second subject:
you have mentioned that the button remains disabled if the users "history.go(-1)". Well, isn't it something you would desire anyway? This would preclude double submits of the same order, if this would be a shopping cart, for instance. In any case, if you are adamant about having the button enabled when the user goes back to this page, use server-side directive to set buffer to false. That would do it.

It's a login form. They want it disabled because they've had problems with robots. I suppose there actually isn't a need for it to be enabled if they go back. If they enter the wrong login credentials, it sends them to another page.

I'll give that a try when a get a chance, however, won't that 'cause the submit button to disappear completely?

 

[GilletteCat]

I'll give that a try when a get a chance, however, won't that 'cause the submit button to disappear completely?

The image button floats on top of the simple image <img src="2.jpg">, that you always wanted to use as a swap image, because of the z-index. Once it becomes invisible, plus goes beneath the 2.jpg (i.e. z-index: -1), the only thing the user can see is 2.jpg, which is not clickable.