Зарегистрировать, какое изображение было нажато в форме

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> 

В этом случае я хотел бы получить доступ к данным POST с PHP, что-то вроде:

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

Но это не работает, поскольку это тип ввода image, который, похоже, не может отправлять данные. Я пробовал использовать кнопку с изображением в качестве фона, но таким образом мне пришлось бы адаптировать размер каждого изображения, чтобы он вписывался в кнопку (чего я хочу избежать, поскольку у меня много изображений).

Я знаю, что я мог бы использовать изображение в качестве кнопки отправки с Javascript, но, как я уже сказал, информация о том, какое изображение была нажата, также должна быть доступна как-то. Любые идеи о лучшем решении?

Answer 1

HTML/CSS - единственный путь.

Настройка CSS, чтобы скрыть кнопки радио:

.hidden { 
    display: none !important; 
} 

В вашей форме, используйте радио кнопки для отслеживания выбрано изображение. Поместите изображение внутри метки, которая «для» соответствующего переключателя. Обязательно поместить любую информацию вы хотите в 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

Когда вы используете свой код, вы получаете параметр submit (из-за атрибута кнопки name) в вашем $_POST объекте. Значение будет атрибутом 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 
    } 
} 
?>