带单选按钮的jQuery post函数 [英] jQuery post function with radio buttons

问题描述

在我的Django应用中，我想使用Twitter引导单选按钮.然后，我想发布这些按钮的值以创建一个对象.

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.

这是我的按钮:

  <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)

问题是我不太了解JavaScript，所以我没有找到如何从按钮获取值的方法.

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?

非常感谢您的帮助.

推荐答案

在您最近发表评论之后，我认为您应该尝试使用HTML中提供的输入单选按钮.进行按钮分组，为输入创建标签以及检索已单击的按钮非常容易.

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.

稍微修改HTML使其看起来像这样(标签的for属性使用户能够单击标签并选择单选按钮，而不必直接单击按钮):

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();

如果您仍然希望使用按钮，则单击时将active类添加到单选按钮.要获取按钮文字，请尝试:

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());

这篇关于带单选按钮的jQuery post函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！