My Goal: when a user clicks on “submit”, I want to get all the selected values (aka “attraction types”) (when a picture is clicked, it should work like a checkbox). The CSS works properly, but when i reach the php file it ignores my selection and says “No Atrtype”, acting like no value was chosen.
I am new to php (and coding in general) and have tried to re-order the divs, use “isset” in php and change the variable names (and a lot more), yet it was to no avail. I would appreciate some help here.
most classes have to do with css attributes , so please ignore css for this question’s sake.
php:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$atrtype1 = (isset($_POST['atrtype']) ? $_POST['atrtype'] : '');
if (empty($atrtype)) {
echo "No Atrtype";
}
else{
echo $atrtype1;
}
}
html:
<form action="get_triptypes.php" method="post" class="home_search_form" id="home_search_form">
<div id="beaches" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[0]" type="checkbox" id="beaches" value="beaches" style="display:none;"/>
<div class="choice_image">
<label for="beaches"> <img src="images/destination_1.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"> </label>
</div>
<div class="choice_title">
<h1 style="font-size:50px;">Beaches</h1>
</div>
</div>
</div>
<!-- Trip -->
<div id="history" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[1]" type="checkbox" id="history" value="history" style="display:none;"/>
<div class="choice_image">
<label for="history"> <img src="images/history0.jpg" alt="" width="350" height="200" onclick="this.style.opacity = 0.4; " ondblclick="this.style.opacity = 1"> </label>
<div class="choice_title">
<h1 style="font-size:40px;">Historic Sites</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="themeparks" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[2]" type="checkbox" id="themeparks" value="themeparks" style="display:none;"/>
<div class="choice_image">
<label for - "themeparks"> <img src="images/amusementpark.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"> </label>
<div class="choice_title">
<h1 style="font-size:40px;">Theme Parks</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="nature" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[3]" type="checkbox" id="nature" value="nature" style="display:none;"/>
<div class="choice_image">
<label for="nature"><img src="images/nature.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4; Add(this);" ondblclick="this.style.opacity = 1;"></label>
<div class="choice_title">
<h1 style="font-size:50px;">Nature</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="shopping" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[4]" type="checkbox" id="shopping" value="shopping" style="display:none;"/>
<div class="choice_image">
<label for="shopping"><img src="images/shopping.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
<div class="choice_title">
<h1 style="font-size:40px;">Shopping Malls</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="food" class="choice_item">
<div class="checkbox-wrapper">
<input name="atrtype[5]" type="checkbox" id="food" value="food" style="display:none;"/>
<div class="choice_image">
<label for="food"><img src="images/food.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
<div class="choice_title">
<h1 style="font-size:40px;">Foodie attractions</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="cities" class="choice_item">
<div class="choice_image">
<div class="checkbox-wrapper">
<input name="atrtype[6]" type="checkbox" id="cities" value="cities" style="display:none;"/>
<label for="cities"> <img src="images/oldtown.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4" ondblclick="this.style.opacity = 1"></label>
<div class="choice_title">
<h1 style="font-size:40px;">Old towns</h1>
</div>
</div>
</div>
</div>
<!-- Trip -->
<div id="culture" class="choice_item">
<div class="choice_image">
<div class="checkbox-wrapper">
<input name="atrtype[7]" type="checkbox" id="culture" value="culture" style="display:none;"/>
<label for="culture"><img src="images/dance.jpg" alt="" width="350" height="250" onclick="this.style.opacity = 0.4;" ondblclick="this.style.opacity = 1"></label>
<div class="choice_title">
<h1 style="font-size:30px;">Cultural Activities</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row load_more_row">
<div class="col">
<input type="submit" class="button home_search_button"/>
</div>
</form>
Advertisement
Answer
There are numerous issues here:
Your PHP is treating the $atrtype1 as if it’s a single value, it’s not, its an array of values. Try print_r($_POST['atrtype']) to see what the data actually is and adjust your code accordingly. You can’t echo out an array.
You have a typo:
$atrtype1 = ...
if (empty($atrtype)) {
These are two different variables!
Also, stop using == and improve your coding style by using === full type-casting qualifiers
Fixed:
// Why do you even need another variable?
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$_POST['atrtype'] = array_filter($_POST['atrtype']); // remove empty values
if (count($_POST['atrtype']) < 1) {
echo "No Atrtype";
}
else{
echo print_r($_POST['atrtype']); //output all values in the array.
}
}
Your processing logic is a mess of arrays and strings, you really need to take a clean sheet of paper and judge what you’re doing from the start, again. I can’t advise much on this without understanding your full intentions and logic flow.