php - List.js 模糊搜索中的 radio 输入未进入 POST

Question

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

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

我已确保每批 radio 的“名称”与表单中的其他字段不冲突。输入正确显示，包括名称、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 类和函数生成的，因此我可以将搜索功能添加到一个页面中以查找多个元素。每组 radio 都有一个唯一的“名称”(“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 应该是一件简单的事情!

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>