帶單選按鈕的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

拿出我的最后一個答案 ，讓我們使用您自己的代碼...在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());