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

C

Csaba2000

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

Dom Leonard

Csaba2000 said:
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.
Click to expand...
<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>
 
J

Jim Ley

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.
Click to expand...

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

Csaba Gabor

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 said:
<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 =========
Click to expand...
<!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>
 
R

Roman Bystritskiy

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 said:
I want to be able to programatically click on the center of an <INPUT
Click to expand...
type=image ...> element (I only care about IE
5.5+). This should work regardless of whether IE has focus. Normally you
Click to expand...
would do myDomElement.click and the mouse
doesn't matter, but in the case of an input image element, what happens is
Click to expand...
the submitted url has something like
"?x=12&y=7" appended to it (the numbers vary per mouse position on the
Click to expand...
clicked element). If you hit the spacebar
while that element has focus or do the .click path, then you wind up with
Click to expand...
"?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
Click to expand...
approriately named hidden element (in our case
<input type=hidden name=x> and <input type=hidden name=y>) and set up an
Click to expand...
onClick handler and insert the position
values that way [document.all.x.value = myImageElement.offsetWidth / 2].
Click to expand...
However, if I insert this element at the
end of the form, what happens then is the submitted url's string has a
Click to expand...
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
Click to expand...
other web servers do?) The situation is
even worse if I insert the hidden element at the beginning of the form,
Click to expand...
because then the initial click handler will
set the hidden element's value, but then quietly dies. Perhaps this
Click to expand...
method can be patched up, though.
The other idea that I had was to use .click with .fireEvent as the code
Click to expand...
below illustrates (it can also be used to
test the above hidden element idea). However, while I am able to modify
Click to expand...
the click event, the onSubmit event's values
don't change. In particular, if I position the mouse above the image
Click to expand...
element before pressing the "Click me" button,
then the mouse coordinates for the onSubmit event appear correct, but the
Click to expand...
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:
Click to expand...
'+event.offsetX+','+event.offsetY);return true;">
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to properly insert a landing page within same container beneath an image element? 0
Pyautogui, cv2 and cannot find image 0
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Only one table shows up with the information 2
Image shifts to the right when export the page to pdf 4
Canvas drawing HTML Javascript on elementor 1
Im having trouble containing a title an image and a button 2
Simulating a button click 2

Members online

Total: 101 (members: 2, guests: 99)
Robots: 479

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,817
Latest member
DicWeils

Latest Threads

Top