Issue
I have a preferences page that has many Boolean fields. I created an UpdateView and when I use {{ form.as_p }}
in my template it works, but I am trying to create individual buttons for each option instead of checkboxes. I couldn't find a way to make it work in my template.
models.py:
class Preference(models.Model):
user = models.OneToOneField("User", on_delete=models.SET_NULL, null=True)
option1= models.BooleanField(default=False)
option2= models.BooleanField(default=False)
option3= models.BooleanField(default=False)
option4= models.BooleanField(default=False)
views.py:
class preferencesview(UpdateView):
model = Preference
form_class = PreferenceForm
success_url = reverse_lazy("profiles:preferences")
forms.py:
class PreferenceForm (forms.ModelForm):
class Meta:
model = Preference
exclude = ['user']
I want to have individual buttons for each option and a submit button to save the changes. Please let me know if you have any documentation or tutorials.
Solution
There is so many ways you can do it. But there is no out of the box solution. My example is with bootstrap css and a little bit of jquery/js:
In form class definition change fields widgets to HiddenInput like:
class PreferenceForm (forms.ModelForm):
class Meta:
model = Preference
exclude = ['user']
widgets = {'option1': forms.HiddenInput,
'option2': forms.HiddenInput,
}
end so on
then in your template loop over fields of form and based on value render the class of button (btn-success/btn-danger):
<form id="myform">
{% for field in form %}
<button type="button" class="btn {% if field.value %} btn-success{% else %}btn-danger{% endif %}"
name="{{ field.name }}">
{{ field.name }}</button>
{{ field }}
{% endfor %}
</form>
don't forget to add {{ field }} itself,
And now with js watch for click on buttons inside #myform and based on hasClass change class of button and value of input:
<script>
$('#myform button').on('click', function () {
let nameof = $(this).attr('name');
if ($(this).hasClass('btn-success')){
$(this).removeClass('btn-success');
$(this).addClass('btn-danger');
$('#myform input[name='+nameof+']').val('False');
} else {
$(this).removeClass('btn-danger');
$(this).addClass('btn-success');
$('#myform input[name='+nameof+']').val('True');
}
});
</script>
That's all. Don't forget to add save button to form. Its just one of many examples how can you do it.
Answered By - Waldemar Podsiadło
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.