Блог

У меня есть несколько изображений в 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, но, как я уже сказал, информация о том, какое изображение было нажато, также должна быть каким-то образом доступна. Есть идеи о лучшем решении?

Способ только для 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
  

Когда вы используете свой код, вы получаете 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
    }
}
?>