Tab Key Radio Buttons Submit No Data
try click into the textarea, press tab key and arrow and space to select one of the three radio buttons, press submit. The _POST request does not show the selected radio option.
HTML
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-2 col-xs-1" role="complementary"></div>
<div class="col-md-6 col-sm-8 col-xs-10" role="main">
<form role="form" action="//yuan3y.com/tools/postrequest.php" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" name="recipient" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" name="message" id="message-text"></textarea>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active" for="visa">
<input type="radio" name="paymentMethod" value="Visa" id="visa" autocomplete="off"
onchange="showMe(this);"
><em class="glyphicon glyphicon glyphicon-circle-arrow-left"></em> Visa
</label>
<label class="btn btn-primary" for="masterCard">
<input type="radio" name="paymentMethod" value="MasterCard" id="masterCard"
onchange="showMe(this);"
autocomplete="off"><em class="glyphicon glyphicon-circle-arrow-up"></em>
MasterCard
</label>
<label class="btn btn-primary" for="discover">
<input type="radio" name="paymentMethod" value="Discover" id="discover"
onchange="showMe(this);"
autocomplete="off"><em
class="glyphicon glyphicon glyphicon-circle-arrow-right"></em> Discover
</label>
</div>
<div class="btn-group">
<button type="submit" class="btn pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
JavaScript
function showMe(elem) {
console.log("hello " + elem.id + ": " + document.getElementById("visa").checked + " " + document.getElementById("masterCard").checked + " " + document.getElementById("discover").checked);
}