2012-01-03 37 views
0

私はかなりの時間Web開発を行ってきましたが、私は最近<input type="image">タグの存在を発見しました。画像ボタンのクリックをシミュレートする方法

次のフォームをWebページに自動的に送信する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バージョンに興味があります。

+0

私は実際に似たような質問を見つけましたが、答えは存在しないリソースへのリンクでした。 – TFennis

答えて

1

各画像に名前を付け、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> 

Serverはimage1.x=0&image1.y=0 or image2.x=0&image2.y=0

+0

jQueryなしで動作しないのはなぜですか? – TFennis

+1

jQueryなしでも動作します。これを見てください:http://fiddle.jshell.net/diode/yqMW9/5/show。 – Diode

0

あなたは以下に対応してJQuery Submit

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

を使用することができ、これは単にフォームと、すべてのデータを提出します。 Form1を提出したい場合は、代わりに提出してください。

1.7でこれが失敗する理由も明白ではありません。他のJavascriptコードはありますか?

+0

これは、どの画像がクリックされたかを識別するためにサーバーが必要とするx座標とy座標を送信しません! – TFennis

+0

サイドノート:jQuery 1.7.1をインクルードしても、この小さなコードは動作しませんが、1.3.2で動作します – TFennis

2

のようなパラメータを受け取ります。ここに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> 
関連する問題