CODEWITHSUNDEEP
htmlcssdjangotwitter-bootstrapdjango-forms
Toms Code
Toms Code

Reputation: 1689

Use buttons (not radiobuttons) for Choicefield in Django?

I have a Django form:

class Form0(forms.Form):
    # Do you agree to the terms?
    CHOICES = [ (1,'Yes'), (0, 'No')]
    response = forms.ChoiceField(widget=forms.RadioSelect,choices=CHOICES)

My views:

def home(request):
    '''
    entry
    '''
    if request.method == 'POST':
        form = forms.Form0(request.POST)
        if form.is_valid():
            assesment, created = models.Assessment.objects.get_or_create(
                session_id=request.session.session_key,
                defaults={'data': {}})
            assesment.data.update({'Terms': form.cleaned_data['response']})
            assesment.save()
            print(form.cleaned_data)
            if form.cleaned_data['response'] == '1':
                return redirect(reverse("question1"))
            else:
                return redirect("conclusion")

            resp =  HttpResponse('ok')
            return resp
    else:
        form = forms.Form0()

    resp = render(request, 'coreapp/index.html', {'form': form})
    if not request.session.session_key:
        request.session.save()
    return resp

It is being rendered in my HTML template. I have made a script to enable submitting the form when clicking on a radio button which works perfectly:

<form method="POST">
  {{ form.as_table }} {% csrf_token %}
  <script>
    $("input[type=radio]").on("change", function () {
      $(this).closest("form").submit();
    });
  </script>
</form>

It looks like this:

enter image description here

The problem

Is it possible to display the 'Yes' and 'No' radioselect as normal buttons? E.g. using bootstrap buttons like:

<button class="btn btn-primary" type="submit">Yes</button>
<button class="btn btn-primary" type="submit">No</button>

enter image description here

Upvotes: 0

Views: 551

Answers (2)

Toms Code
Toms Code

Reputation: 1689

I managed to do this by creating a for loop in my template and adding styling to the new 'myradio' class: 

<form method="POST">
  {% csrf_token %}
    {% if form.response %} 
      {% for radio in form.response %}
        <div class="myradio">
          {{ radio }}
        </div>
      {% endfor %}

  <script>
    $("input[type=radio]").on("change", function () {
      $(this).closest("form").submit();
    });
  </script>
</form>

Upvotes: 0

Hybrid
Hybrid

Reputation: 7049

Yes, you can use bootstrap Checkbox and Radio Buttons:

https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

$('input[type=radio]').on('change', function (e) {
  $(this).closest('form').submit()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<form>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option2" autocomplete="off"> No
    </label>
  </div>

  <br />
  <br />

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options2" id="optionA" autocomplete="off" checked> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionB" autocomplete="off"> No
    </label>
  </div>

  <br />
  <br />

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionA" autocomplete="off"> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionB" autocomplete="off"> No
    </label>
  </div>
</form>


<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

Upvotes: 1

Related Questions