Twitter引导单选按钮不起作用 [英] Twitter bootstrap radio buttons not working

问题描述

我的twitter引导程序javascript单选按钮出现问题。当我选择一个然后点击提交按钮时，它不会显示选定的广播值。

我的代码：

 < form action =class =form-horizo​​ntalmethod =post> 
< fieldset> 
< div class =control-group> 
< label class =control-label>类型：< / label> 
< div class =controls> 
< div class =btn-groupdata-toggle =buttons-radio> 
< button type =buttondata-toggle =buttonname =optionvalue =1class =btn btn-primary> Option One< / button> 
< button type =buttondata-toggle =buttonname =optionvalue =2class =btn btn-primary> Option Two< / button> 
< / div> 
< / div> 
< / div> 
< div class =form-actions> 
< input class =btn btn-primarytype =submitvalue =Go> 
< a href =index.phpclass =btn>返回< / a> 
< / div> 
< / fieldset> 
< / form> 
  

正如您所见，有一个 name =optionvalue = 1和 name =optionvalue =2但是当我选择一个收音机时，我会这样做：

<？php print_r（$ _ POST）; ？>

没有指定选项。

它仅适用于twitter单选按钮，因为当我添加< input type =textname =testvalue =something/> 然后它会出现在 $ _ POST 变量中。

问题在哪里？ 点击时。您需要有一个隐藏的输入字段，并在点击按钮时触发输入内的值更改。

 <输入类型=hiddenname =optionvalue =id =btn-input/> 
< div class =btn-groupdata-toggle =buttons-radio> 
< button id =btn-onetype =buttondata-toggle =buttonname =optionvalue =1class =btn btn-primary> Option One<按钮> 
 < / 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> 
  

在自举的情况下，'收音机'只影响按钮状态&行为。它不影响表单行为。

I got a problem with the twitter bootstrap javascript radio buttons. When I select one and then click the submit button, it doesn't show the selected radio value.

My code:

<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>

As you can see, there is a name="option" value="1" and name="option" value="2" but when I select one radio and I do:

<?php print_r($_POST); ?>

There is no option post specified.

It happens only for the twitter radio buttons, because when I add <input type="text" name="test" value="something"/> then it will appear in the $_POST variable.

Where is the problem?

解决方案

The problem is <button> doesn't submit anything when clicked. You will need to have a hidden input field, and trigger a value change within the input when clicking the 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>

In the case of the bootstrap the 'radio' only affects the button state & behavior. It doesn't effect the form behaviour.

这篇关于Twitter引导单选按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！