Как имитировать кнопку с изображением кнопки

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> 

Я пытался сделать то же самое, вызвав щелчок() на объект ввода-изображения, но это не похоже на работу. Какие-либо предложения. Использование jQuery в порядке, но меня особенно интересует чистая версия JS.

Answer 1

Дайте имена для каждого изображения и попробуйте позвонить $("#<image_id>").click();, если вы используете 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> 

Сервер получает параметры, такие как image1.x=0&image1.y=0 or image2.x=0&image2.y=0

Answer 2

Вы можете использовать JQuery Submit

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

В ответ ниже, это будет просто отправить форму и все данные. Если вы хотите отправить Form1, тогда отправьте это вместо этого.

Существует также нет очевидной причины, почему это может быть неудачным в 1.7 - есть ли другой код Javascript?

Answer 3

Вот легче решение, чем JQuery:

Добавить новый прототип под названием 'нажмите кнопку'

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>