CODEWITHSUNDEEP
htmlformstwitter-bootstrap-3keyboardradio-button
fpeelo
fpeelo

Reputation: 382

Bootstrap3 Radio Button not working with keyboard

I am using Bootstrap3, html, css, php. Am not using javascript, if possible, or jquery.

I want to make a form with several questions, for which the answer is: Yes, No, Not answered. Bootstrap3 has radio buttons which look ideal, and work well - if I use the mouse. But if I tab to the button and press space, Bootstrap seems fairly badly broken. The button value is not posted. Or if I click on the Yes button, then change to No by using the arrow keys, and submit the form, the Yes value is still posted. This is on Firefox 36.0 on Linux Mint.

Does anyone know how to make the radio buttons work with the keyboard?

Here is sample code (test2.php):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<?php
  echo "<p>Value: ".$_POST["tstRadio"]."</p>";
?>
  <div class="page-wrapper">
    <form class="form-horizontal"
          action="test2.php"
          method="POST">
      <div class="form-group">
        <div class="col-xs-12 col-sm-9">
          <label class="control-label" for="tstRadio" >Question</label>
        </div>
        <div class="col-xs-12 col-sm-3">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>
            <label class="btn btn-primary"><input type="radio" name="tstRadio" value="no" >No</label>
          </div>
        </div>
      </div>
      <button type="submit"
              class="btn btn-primary btn-large"
              name="send"
             >Click to Submit Application</button>
      <p>&nbsp;</p>
    </form>
  </div>
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

This shows the posted value, and the radio buttons. I have left out all of the styling that I put on my website.

Click on the Yes button, the Yes button is selected (a subtle change in shading -- I have some CSS to make it more obvious, but the problem happens without that) then on Submit, the value "yes" is posted. Click on No, then Submit, the posted "no" is shown. Just click Submit, there is no posted value. Good so far.

Next, on the fresh form, I press Tab. First issue: I can't see which control has the focus. I press space. Yes is selected. Aha - that was what had the focus. Click submit. But the posted value is empty!

Next, click Yes. Press Tab, right-arrow. Now the No button is selected. Click Submit. The posted value is "yes" - the exact opposite to what the user should expect!

It worries me that people may have made the radio buttons show certain answers, then submitted the form, and the wrong answers got recorded. I can't do anything about what was recorded in the past, but how can I prevent that in the future?

Upvotes: 2

Views: 1782

Answers (1)

fpeelo
fpeelo

Reputation: 382

Sorry to be answering my own question, but I've come across a post elsewhere that at least partially addresses the problem.

At https://github.com/twbs/bootstrap/issues/6570 there is a post by TurboKia in which he replaces the "label" in 

<label class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</label>

with "button", i.e.

<button class="btn btn-primary"><input type="radio" name="tstRadio" value="yes" >Yes</button>

I don't understand this. When I have looked up how to do radio button groups in Bootstrap, e.g. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-buttons.php it says to use <label>. But the <button> does seem to work. Only problem: it is not possible to see a difference between the button being focussed, and it being selected. But I have a small image, a tick mark in a light colour on a transparent background, and I use this as the background for the selected button:

<style>
  .btn-group > .btn-tick.active
  {
    background-image:url('images/TickMark_Light.png');
    background-repeat:no-repeat;
  }
</style>

...

<div class="btn-group" data-toggle="buttons">
  <button class="btn btn-primary btn-tick"><input type="radio" name="tstRadio" value="yes" >Yes</button>
  <button class="btn btn-primary btn-tick"><input type="radio" name="tstRadio" value="no" >No</button>
</div>

So now the button changes colour when I tab to it, but only gets marked with a tick when selected either by pressing space when it has the focus, or by clicking on it. That seems to fix it for me, I hope. It is possible to see when you have tabbed to the button, and the difference between a selected button and an unselected one is no longer just a subtle colour change - the selected one has a tick mark drawn on it. (I would show this, but I don't have the reputation to upload a picture.)

Going against the tutorials for how these buttons are supposed to work, makes me wonder what will go wrong - but for now, I don't see any further problem.

Sorry, I don't have a fiddle for this. I did try to make one, but I couldn't get bootstrap radio button groups to work at all, either with <label> or with <button>.

Upvotes: 0

Related Questions