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

Programatically click <INPUT type=image ...> element

P: n/a
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse
doesn't matter, but in the case of an input image element, what happens is the submitted url has something like
"?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit the spacebar
while that element has focus or do the .click path, then you wind up with "?x=0&y=0" appended to the submitted url,
which is no good for me.
One possible idea that I have not gotten to work is to create an approriately named hidden element (in our case
<input type=hidden name=x> and <input type=hidden name=y>) and set up an onClick handler and insert the position
values that way [document.all.x.value = myImageElement.offsetWidth / 2]. However, if I insert this element at the
end of the form, what happens then is the submitted url's string has a string like "?x=14&x=0&y=0" appended, which is
not good enough (for example, PHP will eat the x=14, and who's to say what other web servers do?) The situation is
even worse if I insert the hidden element at the beginning of the form, because then the initial click handler will
set the hidden element's value, but then quietly dies. Perhaps this method can be patched up, though.

The other idea that I had was to use .click with .fireEvent as the code below illustrates (it can also be used to
test the above hidden element idea). However, while I am able to modify the click event, the onSubmit event's values
don't change. In particular, if I position the mouse above the image element before pressing the "Click me" button,
then the mouse coordinates for the onSubmit event appear correct, but the final string comes out with 0's. Similar
comments apply if you press the space bar while the focus is on the image element.

Thanks,
Csaba Gabor from New York

<HTML>
<HEAD>
<TITLE>fireEvent testing</TITLE>
<SCRIPT>
var TmpOnClick; // a unique temporary variable
function clickHandler() {
// clickHandler is supposed to rewrite the x,y coordinates of the mouse click
var myButton = document.getElementsByTagName("INPUT")[0];
var newEvent = document.createEventObject();

newEvent.offsetX = myButton.offsetWidth / 2; // middle of image
newEvent.offsetY = myButton.offsetHeight / 2; // middle of image
newEvent.cancelBubble = false;
newEvent.button = 1;
myButton.onclick = window.TmpOnClick; // Replace the original click handler
myButton.fireEvent ("onclick", newEvent); // Allow the original handler to take over
event.cancelBubble = true; // Cancel the on hold original event
}

function clickMeSub() {
var myButton = document.getElementsByTagName("INPUT")[0];
window.TmpOnClick = myButton.onclick; // Save any old click handler
myButton.onclick = clickHandler // Insert our click handler
myButton.click(); // Now invoke it
}
</SCRIPT>
</HEAD>
<BODY bgcolor=yellow style=margin-left:.4in>
<FORM onsubmit="alert('submit fired: '+event.offsetX+','+event.offsetY);return true;">
<INPUT type=image
onclick="alert('on click fired: '+event.offsetX+','+event.offsetY);return true;"
title="Click with mouse to see both onClick and onSubmit fire."
accesskey=s value=SubmitMe>
&nbsp;
<BUTTON onclick="clickMeSub();return false;"
title="Simulates a click event, but fails to submit mouse coordinates."
accesskey=c><u>C</u>lick me</BUTTON>
</FORM>
</BODY>
</HTML>
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Csaba2000 wrote:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse
doesn't matter, but in the case of an input image element, what happens is the submitted url has something like
"?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit the spacebar
while that element has focus or do the .click path, then you wind up with "?x=0&y=0" appended to the submitted url,
which is no good for me.

<snip>
I gather program supplied x and y values need to be submitted if
submission is by program or keyboard operation.

One solution is to have the image input click handler discriminate
between mouse click and keyboard event by means of an onmouseup handler.
For mouse click, submission is allowed to proceed as normal with the
browser appending mouse coordinates. Following a keyboard event,
however, submission is cancelled and a timer used to call programmatic
submission using form.submit functionality.

Using one of your ideas, the programmatic submit function dynamically
adds hidden form fields named "x" and "y" with appropriate values before
calling form.submit, avoiding duplicate entries for x and y values in
the process. Appears to check out in IE5, 6, NS6 and Mozilla.

Submitting in the background (without focus) could prove difficult.
Personally I leave confirm dialogs enabled for form submission and would
definitely cancel a request generated whilst away from a browser window
- but that's me.

HTH
Dom

======== test code =========

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled strict.dtd</title>
<script type="text/javascript">

var imgClicked=false; // set by mouseup

function imageSubmit()
{
if(imgClicked)
{ imgClicked = false; // in case of later cancellation
return true;
}
window.setTimeout("progSubmit()",50); // don't submit on this event
return false;
}
function progSubmit()
{
var form = document.forms.testForm;
alert("progSubmit()");
var el = document.createElement("INPUT");
el.type="hidden";
el.name="x";
el.value="5"; // whatever
form.appendChild(el);
el = document.createElement("INPUT");
el.type="hidden";
el.name="y";
el.value="8"; // idem
form.appendChild(el);
form.submit();
return true;
}

</script>
</head>
<body>
<form name="testForm" id="testForm" action="test.html">
<input type="image" src="whatever.png" id=myImg
onmouseup="imgClicked=true";
onclick="return imageSubmit()">
</form>
</body>
</html>


Jul 20 '05 #2

P: n/a
On 04 Aug 2003 23:14:03 GMT, "Csaba2000" <ne**@CsabaGabor.com> wrote:
I want to be able to programatically click on the center of an
<INPUT type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus.


Do you really?

Are you sure you don't want to perform an http request to the server
such as foo.x=100&foo.y=200 if so why not ask how to do that? it's a
lot easier.

What reason do you actually want to perform the bizarre request above?
As always ask a question about your real problem...

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #3

P: n/a
Dom,

thank you, Thank You, THANK YOU! I am amazed and stunned,
but your example is working for me, too. At first I thought
it was because you are creating the x and y elements with
javascript, but the point is that your method works because
of the form.submit. The image element won't submit itself
unless its being clicked. Very nifty! Great thinking!
As I mentioned to the other respondant, it was only yesterday
that I saw your post when I was looking for my original writeup
on Google. Neither of the two replies to my original post show
up in my Outlook Newsreader. Go figure.
A comment on my adaptation of your solution. This is just
me thinking out loud. Any presubmission handling should happen
before I (my IE exerciser) get involved. So it means that I should
hook myself into the final handler, and note the return value.
Cancel it in any case. However, if we returned true, that's
when I create the x,y elements and do the form.submit. Hmmm,
I'll have a little bit of reading to do to figure out how
to make sure I'm the last guy in the chain, but this looks
workable and I don't introduce artifacts if the submission is
cancelled. This should work. Cool. Majorly cool.

I'd like to clarify your last remark, in case you see this reply.
It was unclear to me whether you talking from the point of view of
the client or the server. If your comment about the alert boxes
is from the client's (user's) point of view: The user is expected
to know the sequence of actions they are directing IE to do.
In particular, they should expect the confirm/alert boxes. These
can be detected, responded to, and dismissed (It's one of the
directives that my IE exerciser (should - it's untested) allows.
From the server's point of view, there should be absolutely zilch
detectable difference. If there is, the simulation is not true.
Hopefully, I've understood your point.
Thanks again Dom,
Csaba Gabor from New York

Dom Leonard <do*************@senet.andthis.com.au> wrote in message news:<XO***************@nnrp1.ozemail.com.au>...
Csaba2000 wrote:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse
doesn't matter, but in the case of an input image element, what happens is the submitted url has something like
"?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit the spacebar
while that element has focus or do the .click path, then you wind up with "?x=0&y=0" appended to the submitted url,
which is no good for me.

<snip>
I gather program supplied x and y values need to be submitted if
submission is by program or keyboard operation.

One solution is to have the image input click handler discriminate
between mouse click and keyboard event by means of an onmouseup handler.
For mouse click, submission is allowed to proceed as normal with the
browser appending mouse coordinates. Following a keyboard event,
however, submission is cancelled and a timer used to call programmatic
submission using form.submit functionality.

Using one of your ideas, the programmatic submit function dynamically
adds hidden form fields named "x" and "y" with appropriate values before
calling form.submit, avoiding duplicate entries for x and y values in
the process. Appears to check out in IE5, 6, NS6 and Mozilla.

Submitting in the background (without focus) could prove difficult.
Personally I leave confirm dialogs enabled for form submission and would
definitely cancel a request generated whilst away from a browser window
- but that's me.

HTH
Dom

======== test code =========

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled strict.dtd</title>
<script type="text/javascript">

var imgClicked=false; // set by mouseup

function imageSubmit()
{
if(imgClicked)
{ imgClicked = false; // in case of later cancellation
return true;
}
window.setTimeout("progSubmit()",50); // don't submit on this event
return false;
}
function progSubmit()
{
var form = document.forms.testForm;
alert("progSubmit()");
var el = document.createElement("INPUT");
el.type="hidden";
el.name="x";
el.value="5"; // whatever
form.appendChild(el);
el = document.createElement("INPUT");
el.type="hidden";
el.name="y";
el.value="8"; // idem
form.appendChild(el);
form.submit();
return true;
}

</script>
</head>
<body>
<form name="testForm" id="testForm" action="test.html">
<input type="image" src="whatever.png" id=myImg
onmouseup="imgClicked=true";
onclick="return imageSubmit()">
</form>
</body>
</html>
Jul 20 '05 #4

P: n/a
May be you should try to call submit() on your form.

Say you form id is "theform",
so in the end of your click handler
you write document.forms["theform"].submit();

"Csaba2000" <ne**@CsabaGabor.com> wrote in message
news:bg********@dispatch.concentric.net...
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like "?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit the spacebar while that element has focus or do the .click path, then you wind up with "?x=0&y=0" appended to the submitted url, which is no good for me.
One possible idea that I have not gotten to work is to create an approriately named hidden element (in our case <input type=hidden name=x> and <input type=hidden name=y>) and set up an onClick handler and insert the position values that way [document.all.x.value = myImageElement.offsetWidth / 2]. However, if I insert this element at the end of the form, what happens then is the submitted url's string has a string like "?x=14&x=0&y=0" appended, which is not good enough (for example, PHP will eat the x=14, and who's to say what other web servers do?) The situation is even worse if I insert the hidden element at the beginning of the form, because then the initial click handler will set the hidden element's value, but then quietly dies. Perhaps this method can be patched up, though.
The other idea that I had was to use .click with .fireEvent as the code below illustrates (it can also be used to test the above hidden element idea). However, while I am able to modify the click event, the onSubmit event's values don't change. In particular, if I position the mouse above the image element before pressing the "Click me" button, then the mouse coordinates for the onSubmit event appear correct, but the final string comes out with 0's. Similar comments apply if you press the space bar while the focus is on the image element.
Thanks,
Csaba Gabor from New York

<HTML>
<HEAD>
<TITLE>fireEvent testing</TITLE>
<SCRIPT>
var TmpOnClick; // a unique temporary variable
function clickHandler() {
// clickHandler is supposed to rewrite the x,y coordinates of the mouse click var myButton = document.getElementsByTagName("INPUT")[0];
var newEvent = document.createEventObject();

newEvent.offsetX = myButton.offsetWidth / 2; // middle of image
newEvent.offsetY = myButton.offsetHeight / 2; // middle of image
newEvent.cancelBubble = false;
newEvent.button = 1;
myButton.onclick = window.TmpOnClick; // Replace the original click handler myButton.fireEvent ("onclick", newEvent); // Allow the original handler to take over event.cancelBubble = true; // Cancel the on hold original event }

function clickMeSub() {
var myButton = document.getElementsByTagName("INPUT")[0];
window.TmpOnClick = myButton.onclick; // Save any old click handler
myButton.onclick = clickHandler // Insert our click handler
myButton.click(); // Now invoke it
}
</SCRIPT>
</HEAD>
<BODY bgcolor=yellow style=margin-left:.4in>
<FORM onsubmit="alert('submit fired: '+event.offsetX+','+event.offsetY);return true;"> <INPUT type=image
onclick="alert('on click fired: '+event.offsetX+','+event.offsetY);return true;" title="Click with mouse to see both onClick and onSubmit fire."
accesskey=s value=SubmitMe>
&nbsp;
<BUTTON onclick="clickMeSub();return false;"
title="Simulates a click event, but fails to submit mouse coordinates."
accesskey=c><u>C</u>lick me</BUTTON>
</FORM>
</BODY>
</HTML>

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.