I have multiple images in a HTML document and I want them to render unique values when they are clicked (in some retrievable way). I have tried having them as form elements, like so:
<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>
In this case I would like to access the POST data with PHP, something like:
if (isset($_POST['action'])) {
echo '<br />The ' . $_POST['submit'] . ' button was pressed';
}
But this doesn't work, as it's the image
input type, which doesn't seem to be able to send data. I have tried using a button with the image as background, but this way I would have to adapt the size of each image to make it fit in the button (which I want to avoid, as I have many images).
I know I could use an image as a submit button with Javascript, but as I said, information about which image has been clicked also needs to be available somehow. Any ideas about the best solution?
HTML / CSS - Only way.
Set up the CSS to hide the radio buttons:
.hidden {
display: none !important;
}
In your form, use radio buttons to track which image is selected. Put the image inside of a label that is "for" the relevant radio button . Be sure to put whatever info you want in PHP inside the value
attribute of the radio buttons:
<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>
If you need the form to submit when they click an image, then add this bit of 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>
Then, when you submit this form, in your PHP you'd be able to do this:
$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
When you use your code, you get the submit
param (because of the button's attribute name
) in your $_POST
object. The value will be the value
attribute.
So you can check this like this:
<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
}
}
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.