简体   繁体   中英

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();
            });

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM