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

Question

我有一个表格，允许人们填写“职责名单”，从列表中选择负责特定任务的人员。我正在使用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应该有一个带有输入值的'officiant'元素。但它从$ _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。 / p>

如果有帮助的话，我可以从我的函数发布PHP代码。我没有立即发布，因为生成的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

问题最终成为一个冲突的＆＃34;列表＆＃34;来自我的一个PHP函数的类。我错误地包裹了表格因为我没有正确表达我的条件。这个＆＃34;列表＆＃34;因为每个＆＃34;列表＆＃34;需要在自己的容器中。

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