$_POST command doesnt recognise multiple-choice image checkbox value

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>

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.