CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
danny
danny

Reputation: 95

redirect to different pages on selected radio button using button click

The following image is a pop up that details risk warnings and then asks users to choose one of the two radio buttons. When 'I agree'(Submit) button is clicked, it should redirect to different pages based on which radio button is selected. The submit button has a jquery class.Can someone help me with a jquery code to check which radio button is selected and redirect to different pages?
IMG

The html is below,

    <div id="mask">
    </div>
    <!-- create white empty box -->
    <div id="boxes" class="bodytext">
        <!-- things that go in the box -->
        <div id="dialog" class="window">
           <strong>Disclaimer and Risk Warnings</strong>
            <br />
            <br />
            <div class="bodytext" style="overflow: auto; height: 160px; width: 500px;      border: activeborder 1px solid;">                   
            </div>
            <br/>
            <strong> Please select the user type that applies to you</strong>
            <br/>               
            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem>Private Clients</asp:ListItem>  
            <asp:ListItem>Professional Intermediaries</asp:ListItem>  
            </asp:RadioButtonList>             

            <p>
                <input id="AcceptButton" type="button" value="I Agree" class="close"  style="margin-left: 215px" />
            </p>
        </div>
    </div>

The jquery class is below

              $('.window .close').click(function (e) {

                $.cookie("CamSession1", "CAM");                   
                if ($('#Private Clients').is(':checked')) {
                    window.location.replace("http://stackoverflow.com");
                }
                else if ($('#Professional Intermediaries').is(':checked')) {
                    window.location.replace("http://exchange.com");
                }
                e.preventDefault();
                $('#mask').hide();
                $('.window').hide();
            });

Upvotes: 0

Views: 8055

Answers (1)

Ranjit Singh
Ranjit Singh

Reputation: 3735

Try this

Html

<div id="mask">
    </div>
    <!-- create white empty box -->
    <div id="boxes" class="bodytext">
        <!-- things that go in the box -->
        <div id="dialog" class="window">
           <strong>Disclaimer and Risk Warnings</strong>
            <br />
            <br />
            <div class="bodytext" style="overflow: auto; height: 160px; width: 500px;      border: activeborder 1px solid;">                   
            </div>
            <br/>
            <strong> Please select the user type that applies to you</strong>
            <br/>               
            <input type="radio" name="rdotnc" id="rdo1" />Private Clients
            <input type="radio" name="rdotnc" id="rdo2"/>Professional Intermediaries
            </asp:RadioButtonList>             

            <p>
                <input id="AcceptButton" type="button" value="I Agree" class="close"  style="margin-left: 215px" />
            </p>
        </div>
    </div>

Javascript

$('.window .close').click(function (e) {
                //$.cookie("CamSession1", "CAM");  
                if ($('#rdo1').is(':checked')) {
                    window.location.replace("http://www.stackoverflow.com");
                }
                else if ($('#rdo2').is(':checked')) {
                    window.location.replace("http://www.exchange.com");
                }
                $('#mask').hide();
                $('.window').hide();
            });

Check fiddle here

Upvotes: 2

Related Questions