List.js 模糊搜索中的无线电输入未进入 POST

Question

我有一个表格，允许人们填写 'duty roster'，从列表中选择负责特定任务的人。我正在使用 List.js's fuzzy search 快速找到所需的记录。

出于某种原因，当我处理表单时，List.js 列表中的输入字段未被选取。

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

HTML 来自 List.js 搜索

<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 应该有一个包含输入值的 'officiant' 元素。但是从$_POST.

中省略了

这些 List.js 搜索框是由 PHP class 和我编写的函数生成的，因此我可以将搜索功能添加到一个页面中用于多个项目。每套收音机都有唯一的 'name'（'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，这样我可以直观地判断单选按钮是否被选中，结果是相同的——none这些 List.js 输入正在进入 POST。

我可以 post 来自我函数的 PHP 代码，如果这有帮助的话。我没有立即 post 它，因为生成的 HTML 似乎是正确的。我很感激你的帮助。我已经这样做了一段时间并且不知所措。将值传递给 POST 应该是一件简单的事情！

Answer 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>

Answer 2

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

在使用 OOP 时，最好查看所有生成的 HTML...

List.js 模糊搜索中的无线电输入未进入 POST

Radio inputs in a List.js fuzzy-search not making it to POST

css

php

listjs

HTML 来自 List.js 搜索

CSS