html - Bootstrap3 Radio Button not working with keyboard -

-

i using bootstrap3, html, css, php. not using javascript, if possible, or jquery.

i want make form several questions, answer is: yes, no, not answered. bootstrap3 has radio buttons ideal, , work - if use mouse. if tab button , press space, bootstrap seems badly broken. button value not posted. or if click on yes button, change no using arrow keys, , submit form, yes value still posted. on firefox 36.0 on linux mint.

does know how make radio buttons work keyboard?

here 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 , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view 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 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 posted value, , radio buttons. have left out of styling put on website.

click on yes button, yes button selected (a subtle change in shading -- have css make more obvious, problem happens without that) on submit, value "yes" posted. click on no, submit, posted "no" shown. click submit, there no posted value. far.

next, on fresh form, press tab. first issue: can't see control has focus. press space. yes selected. aha - had focus. click submit. posted value empty!

next, click yes. press tab, right-arrow. no button selected. click submit. posted value "yes" - exact opposite user should expect!

it worries me people may have made radio buttons show answers, submitted form, , wrong answers got recorded. can't recorded in past, how can prevent in future?

sorry answering own question, i've come across post elsewhere @ least partially addresses problem.

at https://github.com/twbs/bootstrap/issues/6570 there post turbokia in replaces "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 have looked how radio button groups in bootstrap, e.g. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-buttons.php says use <label>. <button> seem work. problem: not possible see difference between button being focussed, , being selected. have small image, tick mark in light colour on transparent background, , use background 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 button changes colour when tab it, gets marked tick when selected either pressing space when has focus, or clicking on it. seems fix me, hope. possible see when have tabbed button, , difference between selected button , unselected 1 no longer subtle colour change - selected 1 has tick mark drawn on it. (i show this, don't have reputation upload picture.)

going against tutorials how these buttons supposed work, makes me wonder go wrong - now, don't see further problem.

sorry, don't have fiddle this. did try make one, couldn't bootstrap radio button groups work @ all, either <label> or <button>.


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

-
i've been working on making 2d map editor past 2 weeks or so, , i've run strange problem. trying optimize code, example, making functions should've been functions begin with, did made cpu usage go through roof. i've tried commenting out different sections of code thought culprits (scrolling, rendering, other calculations) no avail. think issue might trying call things within different functions, sake of making modular possible, i'd functionality. the other major change i've made since file i'm comparing i've ported variables external cpp file, since having variables global makes lot easier use within different functions. simple issue, can't life of me understand why happens. with original code, around 2-3% cpu usage. new code, around 20-35%, but, if move mouse around, it'll drop around 6-8%. tl;dr: after trying optimize code using functions, i've somehow killed performance, , found strange quirk moving mouse reduces cpu usage.. /...
Read more

ios - Possible to get UIButton sizeThatFits to work? -

-
i have been using method of resizing uibuttons depreciated, , not robust. , other reasons, want sizethatfits work uibuttons. i've read online, i'm not sure if should work (seems working some, not others, difference maybe between style, i'm using custom). here simple test code recreate issue (i put in viewdidload test, shouldn't matter, , real code part of large project): uibutton *btn = [uibutton buttonwithtype:uibuttontypecustom]; [btn settitle:@"this test long title need word wrap more single line when displayed on tiny ipod in portrait view." forstate:uicontrolstatenormal]; btn.titlelabel.linebreakmode = uilinebreakmodewordwrap; // depreciated - nothing replace it? cgrect r = btn.frame; r.origin.x = 0; r.origin.y = 0; r.size.width = 320; r.size.height = [btn.titlelabel.text sizewithfont:btn.titlelabel.font constrainedtosize:cgsizemake(r.size.width,100000) linebreakmode:btn.titlelabel.linebreakmode].height; // returns approx 86 , changes correctly ...
Read more