ChoiceField的正常按钮

软件版本：我正在使用Django 1.7和Python 3.4ChoiceField的正常按钮

我正在使用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"，那么表单将接受选择，但会将按钮变成单选按钮，这是我不想要的。

我该如何保持选项为完整按钮，并且仍然能够接受输入？

来源

2014-12-06 rfj001

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

<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

我也有jQuery的上添加CSS类标签单击以更改所选标签的外观。这似乎运作良好。

来源

2014-12-06 06:09:29 rfj001

如果没有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后在做什么。您需要为每个按钮设置事件处理程序，并在单击按钮时更新值。

来源

2014-12-06 06:02:55 AlexMeng

ChoiceField的正常按钮

回答

相关问题