$_POST 命令无法识别多选图像复选框值

Question

我的目标：当用户点击“提交”时，我想获取所有选定的值（又名“景点类型”）（点击图片时，它应该像复选框一样工作）。 CSS 正常工作，但是当我到达 php 文件时，它会忽略我的选择并显示“No Atrtype”，就像没有选择任何值一样。

我是 php 的新手（和一般的编码）并尝试重新排序 div，使用 "isset" in php 并更改变量名称（以及更多），但无济于事。我会很感激这里的一些帮助。

大多数类与 css 属性有关，因此请为了这个问题忽略 css。

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 1

这里有很多问题：

您的 PHP 将 $atrtype1 视为单个值，但它不是，它是一个 值数组 。尝试 print_r($_POST['atrtype']) 查看实际数据并相应地调整您的代码。你不能 echo 出一个数组。

你打错了：

$atrtype1    = ...
if (empty($atrtype)) {

这是两个不同的变量！

此外，停止使用 == 并通过使用 === 完整类型转换限定符

改进您的编码风格

固定：

// 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. 
   }

}

你的处理逻辑是一堆乱七八糟的数组和字符串，你真的需要拿一张干净的纸 sheet 重新从头判断你在做什么。在不了解您的全部意图和逻辑流程的情况下，我无法就此提出太多建议。

$_POST 命令无法识别多选图像复选框值

$_POST command doesnt recognise multiple-choice image checkbox value

html

php

forms

checkbox

image

固定：