如何模拟图像按钮的单击

Question

I've been doing web development for quite some time but I only recently discovered the existence of the <input type="image"> tag.

I have a greasemonkey script that automatically submits the following form on a webpage.

<form id="form1">
      <input id="radio1" type="radio" /> 
      <input id="radio2" type="radio" /> 
      <input id="buttn1" type="submit" />
</form>

And I use the following script to submit this form.

var form = document.getElementById('form1');

for(var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    if(element.id == 'radio2') {
       element.setAttribute("checked", "checked");        
    }
    if(element.id == 'buttn1') {
        var button = element;
    }
}
button.click();

I will immediately agree there are possibly 1000 better ways to do this but it works in this situation. It works perfectly but I'm kinda stuck on submitting the following form

<form id="form2">
    <input type="image" id="img1" src="img1.png" />
    <input type="image" id="img2" src="img2.png" />
</form>

I've tried doing the same by calling click() on the input-image object but that doesn't seem to work. Any suggestions. Using jQuery is fine but I'm particularly interested in the clean JS version.

Answer 1

Here's a lighter solution than using jquery:

Add a new prototype named 'click'

HTMLElement.prototype.click = function() {
    var evt = this.ownerDocument.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    this.dispatchEvent(evt);
}

Then to utilize it..

<form>
    <input id="some_id" type="checkbox" name="foo"></input>
</form>
<script>
   document.getElementById('some_id').click();
</script>

Answer 2

Give names for each image, and try calling $("#<image_id>").click(); , if you are using jQuery.

<form id="form2" method="get">
    <input type="image" id="img1" src="https://encrypted.google.com/images/logos/ssl_logo.png" name="image1"/>
    <input type="image" id="img2" src="http://www.w3schools.com/images/w3schoolslogo.gif" name="image2"/>
</form>

Server will receive parameters like image1.x=0&image1.y=0 or image2.x=0&image2.y=0

Answer 3

You could use JQuery Submit

$('#Form2').submit();

In response to below, this will simply submit the form and all the data. If you want to submit Form1 then submit that instead.

There is also no obvious reason why this would be failing in 1.7 - is there other Javascript code?