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

Question

我有一个表格，允许人们填写一份“职务名册”，从一份负责某项任务的名单中选择一个人。我正在使用List.js模糊搜索快速找到所需的记录。

由于某些原因，当我处理表单时，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类和函数生成的，这样我就可以将搜索功能添加到多个项的页面中。每套收音机都有一个独特的“名字”(“天”、“传道人”、“教堂_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输入都没有让它发布。

如果这有帮助的话，我可以从我的函数中发布PHP代码。我没有立即发布它，因为生成的HTML看起来是正确的。我很感谢你的帮助。我已经在这里呆了一段时间了，我有点不知所措。传递值到POST应该是一个简单的事情！

Answer 1

这个问题最终是来自我的PHP函数中的一个相互冲突的“列表”类。是错误地包装表单，因为我没有正确表达我的条件。这种“列表”冲突阻止了List.js按照其设计的方式工作，因为每个“列表”都需要在它自己的容器中。

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

Answer 2

只需在标签上添加以下属性：

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