How to simulate click on <input type="image" /> ?

Question

when we submit a form using this type of input, the coordinates (x,y) are appended to the result.

it works if I dynamically create 2 hidden inputs, but I wanted something different.
Event or MouseEvent would be great, but I couldn't make it work

here's my current code: (it works fine)

var input = document.createElement("input");
input.type = "hidden";
input.name = "x";
input.value = posx;
my_form.appendChild(input);

input = input.cloneNode(false);
input.name = "y";
input.value = posy;
my_form.appendChild(input);

I'll give you an example of situation

Let's imagine that near to the image form element there is a plain text that says: Click in the image below in any position greater than 20 and lesser than 60

A normal person would read this and click normally.
But I need to, as a robot without hands, simulate the same click event

Answer 1

Without fully understanding what you are trying to do here (your question is a little vague, IMO), I have to ask this: Have you ever considered using jQuery or another javascript library/framework? I understand sometimes, for very simple sites, it's overkill. But, it might be worth it to relieve the headache of figuring this stuff out on your own.

From what I can understand, you are using an "image" form element to submit a form and you want to simulate a click on the image element to retrieve the x/y coordinates of something. I could be wrong. Could you be more explicit in your details?

I'll see if I can show you how to do it in jQuery when I know more about your problem.

Answer 2

I can't tell what you're trying to append the result to. The values in the form? This is automatic and requires no code (they come across and x and y, or elementname.x and elementname.y).

edited after comment:
You can avoid the node insert event by not making the elements at that time; ie add x and y to the form. Then on the event you can simply set their value. There are certainly different events you could bind this too, and I don't know your situation, but I made an example that uses an onClick event attached to the body of the page itself. You may want, instead, to bind specific onClick events to different clickable items and insert your own locations for them but in my case I submitted the location of the mouse on the page. If that's not helpful, make a comment about why and I'll see if I can mod it again.