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

带有单选按钮的jQuery post功能

2 个答案: