List.js 模糊搜索中的单选输入未进入 POST答案

【问题标题】：Radio inputs in a List.js fuzzy-search not making it to POSTList.js 模糊搜索中的单选输入未进入 POST
【发布时间】：2017-04-26 07:22:22
【问题描述】：

我有一个表格，允许人们填写“职责名册”，从列表中选择负责特定任务的人员。我正在使用List.js's fuzzy search 快速找到想要的记录。

由于某种原因，当我处理表单时，没有选择 List.js 列表中的输入字段。

我已确保每批收音机的“名称”与表单中的其他字段不冲突。输入正确显示，包括名称、id、值和类型。但提交时它们不会出现在 POST 数组中。

来自 List.js 搜索的 HTML

<form id = "form" action = "" method = "POST">   
  // List.js fuzzy-search and some wrapper divs 
  <ul class = "list">
    <li>
        <label>
            <input type = "radio" name = "officiant" value = "4" id = "dir4">
            <span class = "name">Calum MacFarlane</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
    <li>
        <label>
            <input type = "radio" name = "officiant" value = "2" id = "dir2">
            <span class = "name">Dean Pinter</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
  </ul>

    // more form elements

    <button type = "submit">Submit</button>
</form>

提交时，$_POST 应该有一个带有输入值的“官员”元素。但它在 $_POST 中被省略了。

这些 List.js 搜索框是由我编写的 PHP 类和函数生成的，因此我可以将搜索功能添加到页面中以获取多个项目。每组收音机都有一个唯一的“名称”（“day”、“preacher”、“church_id”等）。

由于生成的 HTML 完好无损，我想知道 List.js 中的某些内容是否会导致问题。

CSS

或者我设置搜索框 CSS 的方式有问题？我隐藏了实际的单选按钮，并在用户进行选择时突出显示标签：

.select-wrapper .list li label input[type="radio"] {display: none;}
.select-wrapper .list li label {
    display: inline-block;
    background: #eee;
    font-weight: 400;
    font-style: italic;
    padding: 6px 16px;
    cursor: pointer;
    width: 100%;
}
.select-wrapper .list li label input[type="radio"]:checked ~ *, .select-wrapper .list li label.active {color: #000; font-weight: 700;}

我通过将输入设置为 display:block 来测试 CSS，这样我就可以直观地判断单选按钮是否被选中，结果是相同的——这些 List.js 输入都没有进入 POST。

如果有帮助，我可以从我的函数中发布 PHP 代码。我没有立即发布它，因为生成的 HTML 似乎是正确的。我会很感激你的帮助。我已经有一段时间了，我很茫然。将值传递给 POST 应该是一件简单的事情！

【问题讨论】：

标签： php css listjs

【解决方案1】：

只需在标签上添加属性，如下所示：

<form id = "form" action = "" method = "POST">   
  <ul class = "list">
    <li>
        <label for="dir4">
            <input type = "radio" name = "officiant" value = "4" id = "dir4">
            <span class = "name">Calum MacFarlane</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
    <li>
        <label for="dir2">
            <input type = "radio" name = "officiant" value = "2" id = "dir2">
            <span class = "name">Dean Pinter</span> (<span class = "church">St. Aidan Anglican Church</span> , <span class = "parish">Moose Jaw</span>, <span class = "diocese">Qu'Appelle</span>)
        </label>
    </li>
  </ul>

    // more form elements

    <button type = "submit">Submit</button>
</form>

【讨论】：

不幸的是，将“for”属性添加到没有效果。页面中的某些内容必须阻止字段使其发布。

【解决方案2】：

问题最终是我的一个 PHP 函数中的一个冲突的“列表”类。错误地包装了表格，因为我没有正确表达我的条件。这种“列表”冲突导致 List.js 无法按照其设计方式运行，因为每个“列表”都需要在自己的容器中。

在使用 OOP 时查看所有生成的 HTML 是个好主意...

【讨论】：