CODEWITHSUNDEEP
htmldjangodjango-templates
Amir
Amir

Reputation: 747

Django - template form checkbox

I am using Django 1.5. Suppose I have a view located at address: example.com/page/*value* I pass the value to the template in the context. I want to have a checkbox, that will control the *value* So for example I go to example.com/page/5 and the checkbox will then look like this:

I select 10, click on the button, it redirects me to /page/10

In AngularJS I had ng-model for the value and it wasn't generally a problem, but what's the Django way of doing a similar thing?

Is it even possible by means of Django templates and pure HTML or do I have to write a bit of javascript?

I currently have it as a dropdown:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  <li class="dropdown-header">Chosen: {{value}}</li>
  ...options...
</ul>

<select> works too, but I cant, quite figure out how to show a value by default:

<select>
  <option value="0">0</option>
  <option value="5">5</option>
  <option value="10">10</option>
</select>

Upvotes: 2

Views: 8292

Answers (3)

GwynBleidD
GwynBleidD

Reputation: 20539

You can also use form to do the task, simple example:

from django import forms

class SelectionForm(forms.Form):
    page = forms.ChoiceField(label="Your label", choices=((0, '0'), (5, '5'), (10, '10)) required=True)

And your view:

from django.views.generic import FormView
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse

class SelectionView(FormView):
    form_class = SelectionForm
    template_name = "your/template.html"

    def get_initial(self):
        return {'page': self.kwargs['page']}

    def form_valid(self, form):

        return HttpResponseRedirect(reverse('selection-view', kwargs={'page': form.cleaned_data['page']})

In urls.py you should have numeric param somewhere in your url, called 'page'. Rendering form in template is up to you, also submitting form when select is changed.

Upvotes: 0

akalikin
akalikin

Reputation: 1127

You can try and use <select> and optionally set selected parameter of <option> with Django {% ifequal a b %} syntax:

<select>
  <option {% ifequal value 0 %} selected {% endifequal %}> 0 </option>
  <option {% ifequal value 5 %} selected {% endifequal %}> 5 </option>
  <option {% ifequal value 10 %} selected {% endifequal %}> 10 </option>
</select>

Similarly you would do checkbox by setting checked parameter

<input type='checkbox' {% ifequal value 0 %}checked{% endifequal %}> 0
....

Upvotes: 1

Alasdair
Alasdair

Reputation: 308779

If you are rendering the select box manually, you just need to add the selected attribute

<select>
  <option value="0">0</option>
  <option value="5" selected>5</option>
  <option value="10">10</option>
</select>

In a Django template, if value is in the template context, you can use an if tag to add the attribute.

<select>
  <option value="0" {% if value == 0 %}selected{% endif %}>0</option>
  <option value="5" {% if value == 5 %}selected{% endif %}>5</option>
  <option value="10" {% if value == 10 %}selected{% endif %}>10</option>
</select>

However, manually rendering templates is often a bad idea. You should consider using Django forms where possible, as they help automate validating input and html rendering of form fields.

Redirecting to a new page when an option is selected is a task for JavaScript, not Django.

Upvotes: 2

Related Questions