註冊已經在表單中點擊圖片

Question

我在HTML文檔中有多個圖像，我希望它們在點擊時以某種可檢索的方式呈現唯一值。我試圖讓他們的表單元素，就像這樣：

<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數據是這樣的：

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

但是，這並不工作，因爲它是image輸入類型，它似乎不能發送數據。我試圖用圖像作爲背景的按鈕，但這種方式我不得不調整每個圖像的大小，使其適合按鈕（我想避免，因爲我有很多圖像）。

我知道我可以使用圖像作爲提交按鈕與Javascript，但正如我所說，關於哪個圖像被點擊的信息也需要以某種方式可用。有關最佳解決方案的任何想法？

Answer 1

HTML/CSS - 唯一途徑。

設置的CSS隱藏單選按鈕：

.hidden { 
    display: none !important; 
} 

在您的形式，使用單選按鈕來跟蹤選擇哪個圖像。將圖像放置在「for」相關單選按鈕的標籤內。一定要把你想要的任何信息在PHP中value屬性單選按鈕內：

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

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

然後，當您提交這份表格，在你的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對象中獲得submit參數（由於按鈕的屬性name）。該值將是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 
    } 
} 
?>