By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,987 Members | 971 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,987 IT Pros & Developers. It's quick & easy.

img onclick and form submisssion

P: n/a
Hi,

I have an image in my HTML form which has onclick() handler. There is
also a submit button and a text box.

Whenever text box has focus and user presses enter, the onclick() event
of image is fired with event.keyCode as undefined. I was expecting that
the form would get submitted.

I tried returning from onclick() handler if keyCode is null, but the
event does not propagate further. Does anybody know solution to this?

Thanks,
Sameer

Aug 25 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a

sa******@gmail.com wrote:
Hi,

I have an image in my HTML form which has onclick() handler. There is
also a submit button and a text box.

Whenever text box has focus and user presses enter, the onclick() event
of image is fired with event.keyCode as undefined. I was expecting that
the form would get submitted.
If you press 'enter' on the text box that's in a form, then by default
the form will get submitted. The onclick event on your image should
not be triggered.
I tried returning from onclick() handler if keyCode is null, but the
event does not propagate further. Does anybody know solution to this?
As said before, your image is not even being clicked on, why would you
expect to trigger the event handler? Without knowing what you're
trying to achieve, there isn't much to go on. Explain what you're
trying to achieve and a minimal set of code which your problem occurs.

Aug 25 '06 #2

P: n/a
web.dev wrote:
sa******@gmail.com wrote:
Hi,

I have an image in my HTML form which has onclick() handler. There is
also a submit button and a text box.

Whenever text box has focus and user presses enter, the onclick() event
of image is fired with event.keyCode as undefined. I was expecting that
the form would get submitted.

If you press 'enter' on the text box that's in a form, then by default
the form will get submitted. The onclick event on your image should
not be triggered.
This is what I am expecting (i.e. form should get submitted), but
instead image's onclick handler is called. (This is happening in
FireFox 1.5.0.6 and not in IE 7.0.5296)
>
I tried returning from onclick() handler if keyCode is null, but the
event does not propagate further. Does anybody know solution to this?

As said before, your image is not even being clicked on, why would you
expect to trigger the event handler? Without knowing what you're
trying to achieve, there isn't much to go on. Explain what you're
trying to achieve and a minimal set of code which your problem occurs.
Here is some sample code
<html>

<script language="javascript">

function validateForm(formObj)
{
alert("Submitting form");
return true;
}

function handleImageClick()
{
alert("In handleImageClick");
return true;
}

</script>

<body>

<form action="dummy" onSubmit="return validateForm(this);">
<input type="text" id="id_date" />
<input type='image' src='icon_calendar.gif'
height='16' width='16'
alt='Select Date'
onclick='handleImageClick()' border='0' />
<input type="submit" />
</form>

</body>

</html>

What I have observed is that the form does get submitted in FF, but
before that onclick()
handler is also called. In my real application, that opens up a pop-up
calendar
which we don't want when user presses enter to submit the form.

Thanks,
Sameer

Aug 25 '06 #3

P: n/a

sa******@gmail.com wrote:
web.dev wrote:
sa******@gmail.com wrote:
Hi,
>
I have an image in my HTML form which has onclick() handler. There is
also a submit button and a text box.
>
Whenever text box has focus and user presses enter, the onclick() event
of image is fired with event.keyCode as undefined. I was expecting that
the form would get submitted.
If you press 'enter' on the text box that's in a form, then by default
the form will get submitted. The onclick event on your image should
not be triggered.

This is what I am expecting (i.e. form should get submitted), but
instead image's onclick handler is called. (This is happening in
FireFox 1.5.0.6 and not in IE 7.0.5296)
I tried returning from onclick() handler if keyCode is null, but the
event does not propagate further. Does anybody know solution to this?
As said before, your image is not even being clicked on, why would you
expect to trigger the event handler? Without knowing what you're
trying to achieve, there isn't much to go on. Explain what you're
trying to achieve and a minimal set of code which your problem occurs.

Here is some sample code
<html>

<script language="javascript">
The language attribute is deprecated, use the type attribute instead:

<script type = "text/javascript">
function validateForm(formObj)
{
alert("Submitting form");
return true;
}

function handleImageClick()
{
alert("In handleImageClick");
return true;
}

</script>

<body>

<form action="dummy" onSubmit="return validateForm(this);">
<input type="text" id="id_date" />
<input type='image' src='icon_calendar.gif'
height='16' width='16'
alt='Select Date'
onclick='handleImageClick()' border='0' />
<input type="submit" />
</form>

</body>

</html>

What I have observed is that the form does get submitted in FF, but
before that onclick()
handler is also called. In my real application, that opens up a pop-up
calendar
which we don't want when user presses enter to submit the form.

Thanks,
Sameer
I see nothing out of the ordinary, except for perhaps missing <head>
elements. Tested in IE 6 and IE 7.0.5520. In both cases, the form
gets submitted. One thing you should note is that an input element
with its type set to image is the same as a submit button, just
graphical. Therefore, there is no need to set an onclick event
handler, nor do you need the second submit button. Just use the
onsubmit event handler on your form.

Aug 25 '06 #4

P: n/a

web.dev wrote:
sa******@gmail.com wrote:
web.dev wrote:
sa******@gmail.com wrote:
Hi,

I have an image in my HTML form which has onclick() handler. There is
also a submit button and a text box.

Whenever text box has focus and user presses enter, the onclick() event
of image is fired with event.keyCode as undefined. I was expecting that
the form would get submitted.
>
If you press 'enter' on the text box that's in a form, then by default
the form will get submitted. The onclick event on your image should
not be triggered.
This is what I am expecting (i.e. form should get submitted), but
instead image's onclick handler is called. (This is happening in
FireFox 1.5.0.6 and not in IE 7.0.5296)
>
I tried returning from onclick() handler if keyCode is null, but the
event does not propagate further. Does anybody know solution to this?
>
As said before, your image is not even being clicked on, why would you
expect to trigger the event handler? Without knowing what you're
trying to achieve, there isn't much to go on. Explain what you're
trying to achieve and a minimal set of code which your problem occurs.
Here is some sample code
<html>

<script language="javascript">

The language attribute is deprecated, use the type attribute instead:

<script type = "text/javascript">
function validateForm(formObj)
{
alert("Submitting form");
return true;
}

function handleImageClick()
{
alert("In handleImageClick");
return true;
}

</script>

<body>

<form action="dummy" onSubmit="return validateForm(this);">
<input type="text" id="id_date" />
<input type='image' src='icon_calendar.gif'
height='16' width='16'
alt='Select Date'
onclick='handleImageClick()' border='0' />
<input type="submit" />
</form>

</body>

</html>

What I have observed is that the form does get submitted in FF, but
before that onclick()
handler is also called. In my real application, that opens up a pop-up
calendar
which we don't want when user presses enter to submit the form.

Thanks,
Sameer

I see nothing out of the ordinary, except for perhaps missing <head>
elements. Tested in IE 6 and IE 7.0.5520. In both cases, the form
gets submitted. One thing you should note is that an input element
with its type set to image is the same as a submit button, just
graphical. Therefore, there is no need to set an onclick event
handler, nor do you need the second submit button. Just use the
onsubmit event handler on your form.
This does not work in FireFox, but I guess that IS the expected
behaviour since you said that input type="image" is treated as a submit
button. So IE is misbehaving.

In our application, we want that image to open up a calendar and a
separate submit would submit the form.

So I modified our code not to use input type="image" and use <atag
with onclick="openCalendar()"

Thanks for your quick responses web.dev,
Sameer

Aug 25 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.