473,224 Members | 1,604 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,224 software developers and data experts.

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

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

Similar topics

4
by: Martin Lucas-Smith | last post by:
I am wanting to know whether are XHTML1-valid characters for use within an id attribute and/or a name attribute. ...
3
by: iinet | last post by:
How can i set in my css a min width for input elements, but leave the max size dynamic? Ben
3
by: TR | last post by:
Is it possible with CSS to prevent this wrapping alignment with a checkbox with a nested label? This is the label of the checkbox that wraps beneath it I'd prefer it looked like...
5
by: Bart van Deenen | last post by:
Hi all I have a form with a couple of input fields, embedded within spans. I am using script.aculo.us for dragging and dropping, and want to reorder the input fields that way. The input fields are...
2
by: Mara Guida | last post by:
Hi, After I've populated a page with some <INPUT ...> elements I'd like to have access to whatever is written there. The best I've done (which does not work) is: ================ //...
4
by: Rick | last post by:
I'm trying to make an input tag visible or hidden based on the value of another input tag, so that when the 1st input tag is changed in anyway, the 2nd input tag will become visible. Thanks in...
2
by: jp2code | last post by:
I have several input fields on my form, and the form works; however, Visual Studio is showing errors, and I would like to get rid of them. When the form is submitted, it is redirected back to...
1
by: JPhilS | last post by:
Hi to all Webmaster! I have discover this problem when I inserted the scores of the students i a centain subject. I am making a school project with regards to saving students' record. first, I...
1
by: test9991014 | last post by:
Hi folks, I've got something like this: <table> <tr> <td>1</td> <td align=center> <input type=text> </td>
8
by: Zhang Weiwu | last post by:
hello. Is it possible to design CSS in the way that content in <inputare not visible in print out (a.k.a. value of <inputnot visible) while the border remain visible? trial: input {...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.