如何提交 twitter bootstrap javascript 按钮？答案

【问题标题】：How to submit twitter bootstrap javascript buttons?如何提交 twitter bootstrap javascript 按钮？
【发布时间】：2012-10-12 21:46:48
【问题描述】：

我说的是 Twitter Boostrap 单选按钮：http://twitter.github.com/bootstrap/javascript.html#buttons

我在我的视图文件中使用了它们，如下所示：

<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']; 是空的...那么我应该如何访问和验证上述“单选”按钮？

【问题讨论】：

标签： twitter-bootstrap validation

【解决方案1】：

该插件仅适用于外观：它不设置任何内容（除了类）。你必须使用自己的 JS 来设置一些真正的单选按钮，或者一个独特的隐藏输入。

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

Demo (jsfiddle)

似乎type="button" 无论如何都没有提交（在我的 Firefox 上）。

这是一种方法，另一种方法是在提交时检查哪个具有.active 类。

【讨论】：

谢谢...我已经对您的代码进行了一些修改，因此当单击这些按钮时，javascript 函数会在隐藏输入 :) 中设置一个值。感谢您为我指明正确的方向。

【解决方案2】：

源自 Sherbrow 的回答的优雅解决方案。它使您可以拥有多个 Bootstrap 风格的单选按钮，并通过一行代码使它们与隐藏的输入保持同步。您需要做的就是始终在 .btn-group 中放置一个隐藏的输入。

HTML：

        <!-- Vehicle
        ================================================== -->
        <div class="control-group">
            <label class="control-label" for="selectRecipients">Vehicle</label>
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn" value="car">Car</button>
                    <button type="button" class="btn" value="bicyle">Bicycle</button>
                    <input type="hidden" name="vehicle" value=""></input>
                </div>
            </div>
        </div>

        <!-- Food
        ================================================== -->
        <div class="control-group">
            <label class="control-label" for="selectRecipients">Vehicle</label>
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn" value="apples">Apples</button>
                    <button type="button" class="btn" value="oranges">Oranges</button>
                    <input type="hidden" name="food" value=""></input>
                </div>
            </div>
        </div>

查询：

    /** 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)，并为隐藏字段提供默认值。

我希望它对某人有所帮助。

【讨论】：

【解决方案3】：

这实际上甚至与 Twitter Bootstrap 无关。您应该考虑为“名称”属性设置唯一名称。

【讨论】：

嗯，没有。按钮命名相同是有原因的。