画像をクリックするとフォームに登録されます

Question

HTML文書に複数の画像があり、検索時に一意の値を表示したい場合があります。 、

if (isset($_POST['action'])) { 
    echo '<br />The ' . $_POST['submit'] . ' button was pressed'; 
} 

しかし、これは動作しません。この場合

<form id="myform" method="post" action=""> 
    <input type="hidden" name="action" value="submit" /> 
    <div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/<?php echo $data[$counter] ?>"></div> 
    <div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/<?php echo $data[$counter+1] ?>"></div> 
</form> 

私は、PHPでPOSTデータにアクセスしたいような何か：私はそうのように、フォーム要素としてそれらを持っ試してみましたそれはimage入力タイプなので、データを送信できないようです。私は背景として画像を持つボタンを使用しようとしましたが、この方法では、ボタンに収まるように各画像のサイズを調整する必要があります（私はたくさんの画像があるので避けたいです）。

JavaScriptを使用して画像を送信ボタンとして使用することができますが、私が言ったように、どの画像がクリックされたかに関する情報も何とか利用可能である必要があります。最高のソリューションについてのアイデア？

Answer 1

HTML/CSS - 唯一の方法。ラジオボタンを非表示にCSSを設定

：フォームで

.hidden { 
    display: none !important; 
} 

は、選択された画像を追跡するためのラジオボタンを使用します。関連するラジオボタンの「の」ラベルの中にイメージを置きます。

<script> 
    // No-conflict-mode-safe document ready function (waits until page is loaded to run, which ensures radio buttons are available to bind to) 
    jQuery(function($) { 
     // Hide/suppress the submit button 
     $('input[type="submit"]').closest('div').hide(); 
     // Bind to change event for all radio buttons 
     $('input[type="radio"]').on('change', function() { 
      // Submit the form ("this" refers to the radio button) 
      $(this).closest('form').submit(); 
     }); 
    }); 
</script> 

：あなたは、彼らは画像をクリックしたときに提出するフォームが必要な場合は

<form method="post" name="myForm"> 
    <div> 
     <input type="radio" name="image" value="image1" id="image1" class="hidden"> 
     <label for="image1"><img src="path-to-your-image.jpg"></label> 
    </div> 
    <div> 
     <input type="radio" name="image" value="image2" id="image2" class="hidden"> 
     <label for="image2"><img src="path-to-your-other-image.jpg"></label> 
    </div> 
    <div> 
     <input type="submit" name="save" value="Save Image Selection"> 
    </div> 
</form> 

が、その後はJavaScriptのこのビットを追加します。ラジオボタンのvalue属性内のPHPであなたが好きな情報に置くようにしてください その後

、このフォームを送信するとき、あなたのPHPで、あなたがこれを行うことができると思います：

$image = $_POST[ 'image' ]; // 'image' is the name of the radio buttons 
var_dump($image); 
// Will result in "image1" or "image2", etc - whatever "value" you assigned to the radio buttons 

Answer 2

コードを使用すると、$_POSTオブジェクトのボタンの属性がnameであるため、submitというパラメータが取得されます。値はvalue属性になります。

だから、このように、これを確認することができます。

<form id="myform" method="post" action=""> 
    <input type="hidden" name="action" value="submit" /> 
    <div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/img1"></div> 
    <div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/img2"></div> 
</form> 

<?php 
if (isset($_POST['submit'])) { 
    if ($_POST['submit'] == 'alt1') { 
     echo 'alt1 clicked'; 
      // First button clicked 
    } 
    else { 
     echo 'alt2 clicked'; 
      // second button clicked 
    } 
} 
?>