2

在我的 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});

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

非常感谢您的帮助。

4

2 回答 2

3

接受我的最后一个答案，让我们使用你自己的代码......在你的 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表单的属性，你什么都不用做...

如果您想通过调用postjavascript 手动提交它，您需要记住防止表单再次提交，因为这是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']

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

于 2012-11-12T22:15:09.363 回答
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());
于 2012-11-12T21:14:20.070 回答