Question

我已经进行了很长一段时间的网络开发，但我最近才发现存在<input type="image">标记。

我有一个greasemonkey脚本，可以自动在网页上提交以下表格。

<form id="form1">
      <input id="radio1" type="radio" /> 
      <input id="radio2" type="radio" /> 
      <input id="buttn1" type="submit" />
</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();

我会立即同意可能有1000种更好的方法来做到这一点，但它适用于这种情况。它完美无缺，但我仍然坚持提交以下表格

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

我尝试通过调用输入图像对象上的click（）来做同样的事情，但这似乎不起作用。有什么建议。使用jQuery很好，但我对干净的JS版本特别感兴趣。

Answer 1

这是一个比使用jquery更轻的解决方案：

添加名为“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);
}

然后利用它..

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

Answer 2

为每个图像命名，如果您使用的是jQuery，请尝试调用$("#<image_id>").click();。

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

服务器将接收image1.x=0&image1.y=0 or image2.x=0&image2.y=0

等参数

Answer 3

您可以使用JQuery Submit

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

在下面的回复中，这将只提交表格和所有数据。如果您想提交Form1，请改为提交。

没有明显的理由说明为什么会在1.7中失败 - 是否还有其他Javascript代码？

如何模拟图像按钮单击

3 个答案: