带有单选按钮的 jQuery post 函数

Question

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

这是我的按钮：

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

我想从这些单选按钮中获取信息并在视图中创建一个与之匹配的对象：

   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，所以我没有找到如何从按钮中获取值。

那么，我想我必须使用：

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

但是我怎样才能使样式和支持与按钮的值相对应，然后仅在用户单击按钮时才发布呢？

非常感谢您的帮助。

Answer 1

使用我的last answer，让我们使用您自己的代码...在您的 HTML 中，您有类似的内容：

<form action="/sportdub/points_dub/" method="post" class="form-horizontal">

  <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" />

</form>

您只需为每个块添加一个隐藏字段，在您的情况下，添加 2。然后您的表单将匹配：

<form action="/page" method="post" class="form-horizontal">

  <input type="hidden" id="supporting_team" value="" />
  <input type="hidden" id="supporting_type" value="" />

  <div class="btn-group supporting_team" 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 supporting_type" 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" />

</form>

添加一个 jQuery 帮助器，它将在按钮单击时设置这些隐藏字段的值：

// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
    $("#supporting_type").val($(this).text());
}); 
$(".supporting_type .btn").click(function() {
    $("#supporting_team").val($(this).text());
}); 

当您点击create your match时，整个表单将被发布到设置为表单action属性的页面，您无需再做任何事情...

如果您想通过在 javascript 中调用 post 手动提交它，您需要记住防止表单再次提交，因为这是 input type="submit" 元素任务，您可以调用您的帖子并序列化整个表单数据，而是像您的示例一样一一...

喜欢：

// when the form is submited...
$("form").submit(function() {

   // submit it using `post`
   $.post('/sportdub/points_dub/', $("form").serialize()); 

   // prevent the form to actually follow it's own action
   return false; 

});

在您的动态代码中，您将拥有这些变量：

supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']

这将是有效的，无论你是否有手动表单提交脚本......

Answer 2

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

稍微改变你的 HTML 看起来像这样（标签的 for 属性允许用户能够点击标签并选择单选按钮，而不是直接点击按钮）：

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

我可以使用这个来获得哪些选择：

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

如果您仍希望使用按钮，请在单击时将 active 类添加到单选按钮中。要获取按钮文本，请尝试：

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

要将此值放入隐藏输入中，请执行以下操作：

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