473,404 Members | 2,114 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,404 software developers and data experts.

img onclick and form submisssion

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
4 13515

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
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

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

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Zalek Bloom | last post by:
Hello, Here is my problem: I am displaying to a user a row of buttons. Depending on which button user presses, I want to go to a different URL and to give a different value to a hidden...
2
by: Andy Goldstein | last post by:
I have a table where all the TRs have an onClick handler registered. One (and only one) of the rows has 2 text input boxes, where each textbox has an onChange handler registered. Both the onClick...
3
by: f1crazed | last post by:
Hello, I am wanting to fire the onClick event of button1 by pressing button2. Does anyone have a clue if this is even posible? If so PLEASE HELP!! Thanks.
4
by: Mark Rae | last post by:
Hi, VS.NET 2003 on WinXPPro, both with all the latest patches and updates, etc... I've got a very simple WebForm which is used either to add a new record to a SQL Server database or edit a...
1
by: dickson.matt | last post by:
OK, I am checking the values of a radiobuttonlist with 2 values (Yes and No) using javascript: <table id="optMedTreatment"...
7
by: extremerep | last post by:
My task is to change the value of a button and then make it functional with the onClick handler. Changing the value to "Play Again" works, but making the onClick work accordingly does not. The...
1
by: Jacqui | last post by:
Hi, I am trying to write a webpage that has a form on it, which gets submitted when a button is pressed, but also has an onclick event which does some DOM manipulation to display a waiting page....
5
by: dangt85 | last post by:
Hello, I have the following page: ... <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.