How can I replace a select box in django with buttons using bootstrap? - django

Question

I am working on a ticketing system and a create new ticket form which requires you to enter the status (working, open, closed etc.), the severity (low, high, normal, asap etc.) and several other parameters. The select boxes seem to be old-school and time-consuming so I want to replace them with a series of buttons.
model
status = models.CharField(max_length=100, choices=STATUS_CHOICES)
severity = models.CharField(max_length=100, choices=SEVERITY_CHOICES)
template:
<div class="form-group">
{{ form.status.errors }}
<label for="id_status" >Status:</label>
{{ form.status }}
</div>
<div class="form-group">
{{ form.severity.errors }}
<label for="id_severity" >Severity:</label>
{{ form.severity }}
</div>
How can this be achieved?

Answer 1

I'm assuming you meant radio buttons here, in which case you need to change the form widget for the field:
SEVERITY_CHOICES=[('critical','Critical'),
('blocking','Blocking),
('normal','Normal)]]
severity = forms.ChoiceField(choices=SEVERITY_CHOICES, widget=forms.RadioSelect())
If that's not what you're after then you'll have to write your own custom widget.

Answer 2

Button is not meant for that, man.
I commented your question and what i meant was - HOW - in the sense of HTML, can BUTTON be used for storing selected value? Button is not meant for that. Button is meant for clickin and doing something upon click.
Yes - you can make button click open drop-down list of elements. And yes- twitter bootstrap supports that (http://getbootstrap.com/components/#btn-dropdowns).
But what does not work is:
Button does not store the selected value. You would have to write all that js by yourself - change button inner text to indicate selected value.
Even worse - BUTTON is not an html element with value attribute - and it does not get posted on form post. You would have to come up with some means of inserting that value into list of values that get posted on form submit. All possible if you know your javascript.
There is no support in django for presenting field with many values as button. You would have to create your own widget for that. Again - it is all possible with django.
BUT... Why go through all that work, when, with some CSS you could just make your select LOOK like the button styles that Twitter bootstrap offers....