Stopping postback inside ASP.NET form (radiobuttonlist) - return false and preventDefault does not work

Question

I have a radiobuttonlist with AutoPostback. When clicking a specific item, I want to stop the postback and show a window instead.

I am able to stop the propagation and show a window if the autopostback=false, so the only thing I need is to be able to STOP the postback.

I have tried to stop the postback, but without luck. Therefore: Any ideas on how to stop postback? I have tried preventDefault(), e.stopImmediatePropagation(), e.stopPropagation() and return false.

My RadioButtonList:

 <asp:RadioButtonList ID="rblShippingMethod" runat="server" AutoPostBack="True" AppendDataBoundItems="true" />

Which is rendered like this:

 <table id="ctl00_ctl00_plhBody_plhMain_rblShippingMethod" border="0">
<tr>
    <td><input id="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_0" type="radio" name="ctl00$ctl00$plhBody$plhMain$rblShippingMethod" value="1,1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$plhBody$plhMain$rblShippingMethod$0\',\'\')', 0)" /><label for="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_0">text</label></td>
</tr><tr>
    <td><input id="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_1" type="radio" name="ctl00$ctl00$plhBody$plhMain$rblShippingMethod" value="1,2" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$plhBody$plhMain$rblShippingMethod$1\',\'\')', 0)" /><label for="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_1">text</label></td>
</tr><tr>
    <td><input id="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_2" type="radio" name="ctl00$ctl00$plhBody$plhMain$rblShippingMethod" value="1,3"  /><label for="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_2">text<br/> <span class="deliveryOption">text</label></td>
</tr><tr>
    <td><input id="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_3" type="radio" name="ctl00$ctl00$plhBody$plhMain$rblShippingMethod" value="2" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$plhBody$plhMain$rblShippingMethod$3\',\'\')', 0)" /><label for="ctl00_ctl00_plhBody_plhMain_rblShippingMethod_3">text</label></td>
</tr>

I have the following JavaScript / jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        var id = $('input[value="1,3"]').attr('id');
        var combined = '#' + id;

        $(combined).click(function (e) {

            e.preventDefault();
            e.stopImmediatePropagation();
            e.stopPropagation();
            magicMethod('mylink');
            alert('Confirming I am even called');
            return false;
        });
    });
</script>

The alert in $(combined).click() is run.

Any ideas? Thanks! :-)

EDIT: Here is my final code:

   <script type="text/javascript">

        // hack to override the default postback of the form

        var oldPostBack;
        var abortPostback = false;

        window.onload = function () {
            oldPostBack = __doPostBack;
            __doPostBack = function () {
                if (!abortPostback) 
                {
                    oldPostBack();   
                }
            };
        };

        $(document).ready(function () {

            var id = $('input[value="1,3"]').attr('id');
            var combined = '#' + id;

            $(combined).click(function(e) {
                 abortPostback = true;
                mymagicmethod('parameter');
            });

        });
    </script>

Answer 1

I think the .net runtime has JS liteners checking for clicks on the radio button list. preventDefault and stopPropagation don't prevent the other listeners from executing.

The other listeners will however try to submit the form so if you put your code in form.submit then you have a chance of stopping the post back.

Check if the radio button with value 1,3 is selected and if so then prevent default and open the window.