Twitter引导程序单选按钮不起作用
Twitter引导程序单选按钮不起作用
提问于 2012-07-13 08:04:09
我在twitter bootstrap javascript单选按钮上遇到了问题。当我选择一个，然后单击submit按钮，它不会显示选定的单选项值。
我的代码：
<form action="" class="form-horizontal" method="post">
<fieldset>
<div class="control-group">
<label class="control-label">Type:</label>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
<button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Go">
<a href="index.php" class="btn">Back</a>
</div>
</fieldset>
</form>正如您所看到的，有一个name="option" value="1"和name="option" value="2"，但当我选择一个无线电并这样做时：
<?php print_r($_POST); ?>
未指定option post。
这只发生在twitter单选按钮上，因为当我添加<input type="text" name="test" value="something"/>时，它将出现在$_POST变量中。
问题出在哪里？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-07-13 08:16:18
问题是<button>在被点击时不会提交任何东西。您需要有一个隐藏的输入字段，并在单击按钮时在输入中触发值更改
<input type="hidden" name="option" value="" id="btn-input" />
<div class="btn-group" data-toggle="buttons-radio">
<button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button>
<button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button>
</div>
<script>
var btns = ['btn-one', 'btn-two'];
var input = document.getElementById('btn-input');
for(var i = 0; i < btns.length; i++) {
document.getElementById(btns[i]).addEventListener('click', function() {
input.value = this.value;
});
}
</script>在bootstrap的情况下，'radio‘只影响按钮的状态和行为。它不会影响表单行为。
Stack Overflow用户
发布于 2012-10-03 22:29:09
这是上面这段代码的jquery替代。
$("body").find(".btn").each(function(){
$(this).bind('click', function(){
$("input[name=view-opt-bt-group-value]").value = this.value
});
});它的HTML是：
<div class="row pull-right">
<div class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" value="0"><i class="icon-th-list"></i></button>
<button type="button" class="btn" value="1"><i class="icon-th-list"></i></button>
<input type="hidden" name="view-opt-bt-group-value" value="0">
</div>
</div>Stack Overflow用户
发布于 2012-12-02 13:41:15
我想出的最简单的jQuery代码是：
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" onClick="$('#gender').val('f');">♀</button>
<button type="button" class="btn" onClick="$('#gender').val('m');">♂</button>
</div>
<input name="gender" id="gender" type="hidden" value="">对我来说，这是一个特殊的用例，所以它不需要健壮或灵活。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11462434
复制相关文章
相似问题