Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: incrediBILL

Message Too Old, No Replies

Browser compatibility issue with submit button

submit button error in firefox and IE

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

New User

5+ Year Member

joined:June 24, 2009
posts: 27
votes: 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!
9:34 pm on May 14, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12704
votes: 244


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.
4:20 am on May 15, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


@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?
4:53 am on May 15, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12704
votes: 244


###. Forgot that detail. (I have a similar mental block on "reset". Most recently it went astray the day before yesterday.)
8:40 am on May 15, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


First things first: what doctype and is your code validated without any complaints ?
8:07 pm on May 16, 2013 (gmt 0)

New User

5+ Year Member

joined:June 24, 2009
posts: 27
votes: 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.
8:31 pm on May 16, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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]

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

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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.
8:40 pm on May 16, 2013 (gmt 0)

New User

5+ Year Member

joined:June 24, 2009
posts: 27
votes: 0


Just tried that, does not work for me. For some reason it won't work unless type="submit"
8:49 pm on May 16, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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?
4:16 pm on May 17, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 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>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members