Bootstrap: active class

Question

In bootstrap, active class is used to get selected radio button value. When a radio button is clicked, active class is added to label of that button. After submitting the form value of radio button with active label is sent for further processing.

However when the active class is added from jquery and form is submitted, it doesn't post/get value of that button. To make this work I have to simulate the click on radio button with active class.

Am I doing something wrong ?

Is there any other way to achieve this ?

<?php
    $value = 1;
    ?>
    <html>
    <head lang="en">
  <meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script>

 function showOption() {
    $(document).ready(function () {

   $('#option_grp input[value=<?php echo "$value"?>]').parent('label').addClass('active').click();

        });
    }
</script>
</head>
 <body onload="showOption()">
 <div class="container">

<form method="post" action="getValue.php">


        <div id="option_grp" class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary">
            <input type="radio" name="pr_type" value="1">Option 1
            </label>
            <label class="btn btn-primary">
            <input type="radio" name="pr_type" value="2">Option 2
            </label>

          </div>

        <input type="submit" name="submit" value="Submit">

 </form>
</div>
</body>
</html>

getValue.php

    $pr_type=$_POST['pr_type'];
    echo "pr_type : ".$pr_type;

Is your goal to mark the correct radio button label as selected and active, or to get the correct radio button value on post? — Kent Anderson, Oct 18 '15 at 08:02
@KentAnderson First I want to mark label as selected and active, and then I want to get correct radio button value on post — Pradip Shenolkar, Oct 18 '15 at 08:04
Ok. Use jQuery to mark the radio button checked instead of triggering the click. See http://stackoverflow.com/a/5665942/1030669 — Kent Anderson, Oct 18 '15 at 08:05
@PradipShenolkar I added more info in an answer. Let us know if you need more information. Thanks. — Kent Anderson, Oct 18 '15 at 08:33

score 1 · Answer 1 · edited May 23 '17 at 12:29

In order for a radio button value to be sent to the server during a POST request, it must be marked as "checked". You can do this more than one way.

For example:

You can simulate a user clicking on the radio button which will cause the radio button to be selected.
You can mark the radio button checked by setting the "checked" attribute to "checked". See this answer for reference.

Either way should work, but the second method would be preferable. Once the radio button is checked, it can be styled however you like. Use can use the Bootstrap class 'active' or any other that you like, but the styling will have no bearing on what is sent back to the server.

Bootstrap: active class

1 Answers1