ChoiceField的正常按鈕

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

我也有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後在做什麼。您需要爲每個按鈕設置事件處理程序，並在單擊按鈕時更新值。