javascript - 带有单选按钮的 jQuery post 函数

Question

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

这是我的按钮:

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

我想从那些单选按钮中获取信息并在 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，所以我没有找到如何从按钮中获取值。

然后，我想我必须使用:

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

并且您只需为每个 block 添加一个隐藏字段，在您的情况下，添加 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());
}); 

当您单击创建匹配项时，整个表单将发布到设置为表单的action 属性的页面，您无需执行任何其他操作。 .

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

喜欢:

// 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']

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