帶單選按鈕的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提供的輸入單選按鈕。做按鈕分組非常簡單，爲輸入製作標籤並檢索哪個被點擊。

改變你的HTML稍微看起來像這樣（在該標籤的屬性，讓用戶能夠點擊標籤，選擇單選按鈕，而不是點擊按鈕直接）：

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

Answer 2

考慮我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中，你需要記住，以防止再次提交表單作爲這就是input type="submit"元素任務post手動提交它，你可以調用您的文章，並通過序列化整個表格的數據，而不是一一個在你的榜樣......

喜歡：

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

這和，這將是有效的，無論你是否有手動表單提交腳本或不...