如何提交twitter bootstrap javascript按鈕？

我說的是從這裏開始的Twitter自舉單選按鈕：http://twitter.github.com/bootstrap/javascript.html#buttons 如何提交twitter bootstrap javascript按鈕？

我用他們在我的視圖文件是這樣的：

<div class="btn-group" data-toggle="buttons-radio"> 
    <input type="button" name="type" class="btn" value="Car"> 
    <input type="button" name="type" class="btn" value="Bicycle"> 
</div>

但是，當我提交表單，並試圖驗證這些，我不能得到他們的價值...

echo $_POST['type'];是空的...所以我應該如何訪問&驗證上述「無線電」按鈕？

來源

2012-10-23 Scott

該插件僅適用於外觀：它不設置任何內容（除了類）。你必須使用你自己的JS來設置一些真正的單選按鈕，或者一個獨特的隱藏輸入。

$('[data-toggle="buttons-radio"] > .btn').on('click',function() { 
    $('#someHiddenInput').val($(this).val()); 
});

Demo (jsfiddle)

似乎type="button"未提交反正（我的Firefox瀏覽器）。

這是一種方法，另一是檢查在提交哪一個具有.active類。

來源

2012-10-24 20:08:34 Sherbrow

感謝您對此...我已經對您的代碼進行了一些修改，所以當點擊這些按鈕時，javascript函數會在隱藏的輸入'：）'中設置一個值。謝謝你指出我朝着正確的方向。 – Scott

-1

這實際上甚至與Twitter Bootstrap無關。您應該考慮爲「名稱」屬性設置唯一的名稱。

來源

2012-10-23 01:31:31 prontamasta

嗯，沒有。這些按鈕命名相同是有原因的。 –

@AndrewBarber +1。 – Scott

來自Sherbrow答案的優雅解決方案。它可以讓你擁有多個Bootstrap風格的單選按鈕，並通過一行代碼與隱藏輸入保持同步。你需要做的只是在.btn-group中放置一個隱藏的輸入。

HTML：

JQUERY：

/** Associate UI-only radio buttons with hidden fields **/ 
    $('[data-toggle="buttons-radio"] > button').on('click', function() { 
     $(this).parent().find('input[type=hidden]').val($(this).val()); 
     alert($(this).parent().find('input[type=hidden]').val()); 
    });

演示：http://jsfiddle.net/KyHMp/1/

在現場設置，你要設置的按鈕作爲默認激活鍵之一（ .active）並給隱藏字段賦予一個默認值。

我希望它可以幫助別人。

來源

2013-02-15 21:56:01

如何提交twitter bootstrap javascript按鈕？

回答

相關問題