locked
Bootstrap radio button group - inconsistent results RRS feed

  • Question

  • User379720387 posted

    Check out my jsfiddle here

    There are a few problems:

    I don't know how to make my sample code work in jsfiddle so that it pulls in bootstrap and I also don't know how to change from a regular post request to something that illustrates my problem

    My problem is that this bootstrap radio button group works only when a button is clicked once. On post it correctly passes on TRUE or FALSE.

    However, when the user clicks On or Off twice, or clicks one and then the other Request["year"] is empty.

    Please advise how this can be fixed in the confines of my form submit.

    @{
    
        Layout = "~/_SiteLayout.cshtml";
        
        if (IsPost)
        {
            var yearselected = Request["year"];
            var test = 0;
        }
    }
    
    
    <div class="container">
        <div class="row">
            <h1>Radio Group</h1>
            <form class="form">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default">
                        <input name="year" value="true" type="radio">ON
                    </label>
                    <label class="btn btn-default">
                        <input name="year" value="false" type="radio">OFF
                    </label>
    
                </div>
                <br /><br />
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
    
    <script>
        $('form').submit(function () {
    
            alert($(this).serialize());
    
            return false;
        });
    </script>

    Tuesday, January 17, 2017 1:25 PM

All replies

  • User-474980206 posted

    change the form to a post otherwise IsPost is always false.

           <form class="form" method="post">

    your jsfiddler doesn't work because you did not include the jQuery library so $ is undefined. under external resources add jQuery, and bootstrap.

    Tuesday, January 17, 2017 4:16 PM