Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onsubmit and or onclick

Status
Not open for further replies.
youngApprentice

youngApprentice

Programmer
Jan 28, 2007
16
US
I'm wondering if you can set an onclick on an input type=image, with or without an onSubmit, to make an Ajax call to submit a form.

I'm using Prototype 1.5.1

Internet Explorer seems to be completely ignoring the onclick of an input type=image.

TIA,
youngApprentice
 
Sort by date Sort by votes
Well... I knocked up a quick test page and then ran some tests.

The test page contains an input type=image - and for fun (because I'm like that) I added a second input type=image and added the disabled="disabled" attribute.

Here is the test page:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-language" content="en">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Input Image Test</title>
	<script type="text/javascript">
		function wibble() {
			alert('Beep');
		}
	</script>
</head>
<body>
	<form action="javascript://do nothing" onsubmit="alert('The onsubmit event was just fired')">
		<fieldset>	
			<input type="image" onclick="wibble()" src="[URL unfurl="true"]http://www.tek-tips.com/images/logo.gif"/>[/URL]
			<br/>
			<input type="image" onclick="wibble()" src="[URL unfurl="true"]http://www.tek-tips.com/images/logo.gif""[/URL] disabled="disabled"/>
			</div>
		</fieldset>
	</form>
</body>
</html>
I found that when I clicked on the first image, I got the expected 'Beep' alert. I also got an alert from the onsubmit. When I clicked the second image, I got nothing -- and that surprised me (you know, I'm easily surprised)!

I confirmed this behaviour with the following browsers in MacOSX: Safari, Firefox, Camino, Internet Explorer, Opera, Mozilla and Netscape.

I went crazy and confirmed this behaviour with the following browsers in Windows: Firefox, Safari, Opera, Internet Explorer (5 & 6), Netscape.

So... cut your page down to the bare minimum to show this problem, and post it up for us.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
I ended up using prototype's Event.observe on my input type=image, as the onclick attribute was being generated on the fly with IE ignoring it. I'm not sure that prototype was "hijacking" the onclick.

-youngApprentice
 
Upvote 0 Downvote
I imagine you were attempting to add the onclick as you were building up the nodes using javascript - am I right?

Regardless, the use of Prototypes methods is certainly the better option in this case.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Jenisha chauhan
  • Locked
  • Question
HOW TO CONVERT LATTITUDE AND LONGITUDE
Replies
0
Views
154
Jenisha chauhan
Jenisha chauhan
BobMCT
  • Locked
  • Question
Assist request for onclick event to trigger ajax call?
Replies
1
Views
156
Diancecht
Diancecht
JScannell
  • Locked
  • Question
asp.net Updating label or textbox text at runtime
Replies
1
Views
196
MarkSweetland
MarkSweetland
Jouster
  • Locked
  • Question
How do i process serialized data with Javascript and ASP? 1
Replies
1
Views
186
vacunita
vacunita
dumz
  • Locked
  • Question
retrieve image from database and view without refreshing
Replies
3
Views
162
deltaflyer666
deltaflyer666

Part and Inventory Search

Sponsor

Back
Top