html – Twitter bootstrap单选按钮不工作

我有一个问题与Twitter的引导javascript单选按钮.当我选择一个然后单击提交按钮时,它不会显示选定的无线电值.

我的代码：

<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); ？> 没有指定任何选项. 它只适用于twitter单选按钮,因为当我添加< input type =“text”name =“test”value =“something”/>那么它将出现在$_POST变量中.

哪里有问题？

解决方法

问题是< 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>

在引导的情况下,“收音机”仅影响按钮状态&行为.它不影响表单行为.

html – Twitter bootstrap单选按钮不工作

解决方法

猜你在找的HTML相关文章