Question

In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.

Here is my buttons:

  <div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn" name="supporting">Team1</button>
  <button type="button" class="btn" name="supporting">Team2</button>
  </div>


  <div class="span6 btn-group ib" data-toggle="buttons-radio">
       <button type="button" class="btn btn-primary active" name="style">relaxed</button>
       <button type="button" class="btn btn-primary active" name="style">strict</button>
  </div>



  <input type="submit" value="create your match">

I would like to get the information from those radio button and create an object match with it in a view:

   def test(request):
       user=request.user
       if request.method == 'POST':
       style = request.POST['style']
       supporting = request.POST['supporting']
       match = Match.objects.create(user=user, style=style, supporting=supporting)
     return HttpResponse(test)

The thing is that I don’t know JavaScript well, so I didn’t find how to get the value from the button.

Then, I think I have to use:

 $.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});

But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?

Thank you very much for your help.

Answer 1

After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.

Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):

  <div>
    <input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
    <input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
  </div>
  <div>
    <input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
    <input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
  </div>

I can get which selections have been made using this:

$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();

If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:

$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();

To put this value into a hidden input, do the following:

$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());