画像にフォームを送信するには

Question

1つのフォーム内に複数の画像があります。クリックした画像に応じて、特定の値がPOSTとともに送信されます。

これはjavascriptなしでもできますか？ （私はjqueryを使用します）。 = 1入力しないで、

<input type="image" name="type" value="1" src="images/type1.jpg" /> 

しかし、唯一の画像のCOORDSが送信されました：

私はこのような何かを試してみました。

Answer 1

この問題に対する安全なアプローチは、入力に一意の名前を与え、どの列が座標を送信するかを確認することです。

<input type="image" name="submit_blue" value="blue" alt="blue" src="blue.png"> 
<input type="image" name="submit_red" value="red" alt="red " src="red.png"> 

成功したコントロールのみがデータを送信します。したがって、submit_blue.xに値があるかどうかを調べ、submit_red.xに値があるかどうかをテストします。

JavaScriptを一切使用する必要はありません。

または、サーバー側のイメージマップの代わりに通常の送信ボタンを使用します。

<button name="action" value="blue"><img src="blue.png" alt="blue"></button> 

...それが適切<button>をサポートしていないとして、これは古いIEに壊れることを念頭に。

Answer 2

は私のアプローチは、単一の「名前」、およびmultpiple「値」で、複数の画像を定義することです。この

<form id="myform" action="mypage.php"> 
your content form here 
<img scr="img1" class="submitableimage" /> 
<img scr="img2" class="submitableimage" /> 
<img scr="imgn" class="submitableimage" /> 
</form> 
<script> 
    $('img.submitableimage').click(function(){ 
     $('#myform').submit(); 
    }); 
</script> 

Answer 3

を試してみてください。

<form id="myform" method="post" action="mypage.php"> 
    <input type="image" name="color" value="blue" alt="blue" src="blue.png"> 
    <input type="image" name="color" value="red" alt="red " src="red.png"> 
</form> 

そして、サーバ側で、私は（「青」または「赤」）「カラー」POST変数に直接選択された値を読み取ることができるようになります。

<?php 
if (isset($_POST["color"]) && !empty($_POST["color"])) { 
    $selected_color = $_POST['color']; 
    echo('Selected color is ' . $selected_color); 
    //"blue" or "red" 
}else{ 
    echo ('No image selected'); 
} 
?> 

Answer 4

jQueryを使用すると、画像をクリックして送信することができます。画像のIDやクラスを追加することができます。

$("#yourImageId").click(function() { 
    $("#yourFormId").submit(); 
});