Question

软件版本：我使用的是Django 1.7和Python 3.4

我正在使用Django表单来处理用户输入验证和处理。在表单中，我有一个ChoiceField，我想使用普通按钮而不是单选按钮或选择输入元素来显示。我自己为模板编写html，而不是使用传递给模板上下文的表单来呈现html。

以下是该字段的HTML：

<form method="get" action=".">
    <div id="div_id_session_type">
        <div class="controls btn-group" role='group'>
            <input type="button" class='btn' name="session_type" id="id_session_type_1" value="Individual">
            <input type="button" class='btn' name="session_type" id="id_session_type_2" value="Small Group">
            <input type="button" class='btn' name="session_type" id="id_session_type_3" value="Class">
        </div>
    </div>
    <input class='btn' type="submit" value="Search">
</form>

当我在选择按钮后提交此表单时，表单无法识别session_type字段（我的ChoiceField）的任何输入。

但是，如果我在所有输入按钮上将type="button"更改为type="radio"，那么表单将接受选择，但它会将按钮变成单选按钮，我不想要。

如何将选项保留为完整按钮，并且表单仍然接受输入？

Answer 1

我找到了一种解决方法，使用隐藏的单选按钮并使标签显示为按钮。：

<form method="get" action=".">
    <div id="div_id_session_type">
        <div class="controls btn-group" role='group'>
            <label for="id_session_type_1" class="btn">Individual</label>
            <input type="radio" class='hidden-radio' name="session_type" id="id_session_type_1">
            <label for="id_session_type_2" class="btn">Small Group</label>
            <input type="radio" class='hidden-radio' name="session_type" id="id_session_type_2">
            <input type="radio" class='hidden-radio' name="session_type" id="id_session_type_3">
            <label for="id_session_type_3" class="btn">Class</label>
        </div>
    </div>
    <input class='btn' type="submit" value="Search">
</form>

和CSS

input[type="radio"].hidden-radio {
  display: none;
}

我还有jQuery在点击时向标签添加CSS类，以便更改所选标签的外观。这似乎运作良好。

Answer 2

没有JavaScript，你无法做到这一点。问题是<input type="button">元素在用户点击它们时不会改变状态。值不会被改变。您是否考虑使用选择输入为用户提供下拉菜单？

<form method="get" action=".">
<div id="div_id_session_type">
    <div class="controls btn-group" role='group'>
        <select>
            <option value="individual">Individual</option>
            <option value="small_group">Small Group</option>
            <option value="class">Class</option>
        </select>
    </div>
</div>
<input class='btn' type="submit" value="Search">

否则，您可以在使用JavaScript后完成您的工作。您需要为每个按钮设置事件处理程序，并在单击按钮时更新值。

ChoiceField的正常按钮

2 个答案: