Browser compatibility issue with submit button

Forum Moderators: open

Message Too Old, No Replies

Browser compatibility issue with submit button

submit button error in firefox and IE

reffik024

6:53 pm on May 14, 2013 (gmt 0)

Originally I had posted this to the PHP section, but just found out it isn't PHP related.

On this login script, I wanted to use an image for the submit button. I put the following in:

<input name="doLogin" type="image" src="login-btn.png" style="margin-left:90px;" id="doLogin3" value="Login">

This works in Chrome and Safari, but not Firefox or Internet Explorer.
When I change it to this, it works on all browsers.

<input name="doLogin" type="submit" style="margin-left:90px;" id="doLogin3" value="Login">

Any suggestions are appreciated thanks!

lucy24

9:34 pm on May 14, 2013 (gmt 0)

Well, it's either image or submit. One type or the other. I think the usual copout involves a transparent button combined with a background image.

Fotiman

4:20 am on May 15, 2013 (gmt 0)

@lucy24, no, input type "image" is designed to act as a submit button.
@reffik024, I'm curious, what exactly do you mean by "doesn't work"? Can you create a very minimal test case that demonstrates it?

lucy24

4:53 am on May 15, 2013 (gmt 0)

###. Forgot that detail. (I have a similar mental block on "reset". Most recently it went astray the day before yesterday.)

swa66

8:40 am on May 15, 2013 (gmt 0)

First things first: what doctype and is your code validated without any complaints ?

reffik024

8:07 pm on May 16, 2013 (gmt 0)

Doctype set as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When I say "doesn't work" I mean when I click on it, the form does not submit.

Fotiman

8:31 pm on May 16, 2013 (gmt 0)

Here's a base case which works for me in all browsers.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test</title></head>
<body>
<div>
 <form action="#">
 <div>
 <input name="doLogin" type="image" src="http://www.webmasterworld.com/gfx/logo.png"
style="margin-left:90px;" id="doLogin3" value="Login"> 
 </div>
 </form>
</div>
</body>
</html>

[edited by: tedster at 2:30 am (utc) on May 17, 2013]
[edit reason] add line breaks - prevent side scroll [/edit]

Fotiman

8:32 pm on May 16, 2013 (gmt 0)

Does that work for you? If so, then you'll probably need to whittle down your own code to figure out what is preventing it from working.

reffik024

8:40 pm on May 16, 2013 (gmt 0)

Just tried that, does not work for me. For some reason it won't work unless type="submit"

Fotiman

8:49 pm on May 16, 2013 (gmt 0)

Hmm. That's bizarre. Could you maybe have some browser plugin/toolbar that's preventing the default browser behavior? What version of IE and Firefox?

drhowarddrfine

4:16 pm on May 17, 2013 (gmt 0)

Pet peeve:

The last time anyone should use that doctype for new web pages was 1999. Quit using it. Use this one:

<!DOCTYPE html>