html - 画像クリックでフォームを送信

Question

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

これはjavascriptなしでできますか？（そうでない場合はjqueryを使用します）。

私はこのようなことを試しました：

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

ただし、type=1 ではなく、画像の座標のみが送信されました。

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

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

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

次に、サーバー側で、「color」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 3

これを試して

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