如何提交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按钮？

回答

相关问题