CODEWITHSUNDEEP
djangodjango-forms
rfj001
rfj001

Reputation: 8498

Normal Buttons for ChoiceField

Software Versions: I am using Django 1.7 and Python 3.4

I am using a Django form to handle user input validation and processing. In the form, I have a ChoiceField that I want to display using normal buttons instead of radio buttons or a select input element. I am writing the html myself for the template, rather than using the form passed to the context of the template to render the html.

Here is the HTML for the field:

<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>

When I submit this form after choosing a button, the form does not recognize any input for the session_type field (my ChoiceField).

However, if I change the type="button" to type="radio" on all of my input buttons, then the form will accept the choice, but it turns the buttons into radio buttons, which I don't want.

How can I keep the choices as full buttons and still have the form accept the input?

Upvotes: 2

Views: 1201

Answers (2)

rfj001
rfj001

Reputation: 8498

I found a workaround by using hidden radio buttons and making the label appear as a button.:

<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>

And CSS

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

I also have jQuery adding CSS classes to the labels on click in order to change the appearance of the selected label. This seems to be working well.

Upvotes: 2

AlexMeng
AlexMeng

Reputation: 833

You cannot accomplish this without JavaScript. The problem is that <input type="button"> elements do not change state when a user clicks on them. A value is not being altered. Have you considered using a select input to give the user a dropdown menu?

<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">

Otherwise, you can accomplish what you're after using JavaScript. You would need to set up event handlers for each button, and update a value when the buttons are clicked.

Upvotes: 0

Related Questions