0

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

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

4

2 回答 2

0

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

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

于 2017-04-26T18:29:07.170 回答
0

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

<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>
于 2017-04-26T07:26:29.573 回答