Question

I loaded a partial view containing some radiobuttons on it in my view, but when I try to respond to events from the radio button, through some jquery calls, I can’t. Is it impossible to do this, or am I placing the code in the wrong place. I placed the jquery codes in the View and the partial view classes, but neither works. Can anyone help..any advice? Or code samples or links?

Code below:

Sorry…Here’s the partial view

@model IEnumerable<Tuda.Models.PriceModel>
<table class="planTable">
        <thead>
            <tr>
                <th></th>
                <th scope="col" abbr="Premium">PREMIUM</th>
                <th scope="col" abbr="Deluxe">DELUXE</th>
                <th scope="col" abbr="Utlmate">ULTIMATE</th>               
            </tr>
        </thead>
        <tfoot>            
            <tr>
                <th scope="row" style="font-weight:bold">Select Plan</th>
                <td><input type="radio" name="planRadio" value="1"></td>
                <td><input type="radio" name="planRadio" value="2"></td>
                <td><input type="radio" name="planRadio" value="3"></td>               
            </tr> 
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Library Use (Includes Questions & Answers Only)</th>
                <td>Unlimited</td>
                <td>Unlimited</td>
                <td>Unlimited</td>             
            </tr>

            <tr>
                <th scope="row">Interview Tips & Guides</th>
                <td><span ><img src="../../Images/check0.png" /></span></td>
                <td><span ><img src="../../Images/check0.png" /></span></td>
                <td><span ><img src="../../Images/check0.png" /></span></td>               
            </tr>
            <tr>
                <th scope="row">Problem Areas Detection</th>
                <td><span ><img src="../../Images/check0.png" /></span></td>
                <td><span ><img src="../../Images/check0.png" /></span></td>
                <td><span ><img src="../../Images/check0.png" /></span></td>               
            </tr>
             <tr>
                <th scope="row">Relevant Concepts & Terminology</th>
                <td> - </td>
                <td> - </td>
                <td><span ><img src="../../Images/check0.png" /></span></td>               
            </tr>
            <tr>
                <th scope="row">User Recommended</th>
                 <td></td>
                <td><span><img src="../../Images/check0.png" /></span></td>
                <td><span><img src="../../Images/check0.png" /></span></td>             
            </tr>
            <tr>
                <th scope="row">Validity</th>
                <td>1 Month</td>
                <td>3 Months</td>
                <td>12 Months</td>             
            </tr> 
        </tbody>
    </table>  

       <script type="text/javascript">
           $(document).ready(function () {        

$("input[name='planRadio']").change(function(){
    var planse = $("input[name='planRadio']:checked").val();
    $.get('@Url.Action(MVC.Account.AddToCartPartial())',
                { id: planse }, function (data) {
                    $('#plan').html('<p><strong>Adding to cart...</strong>&nbsp;&nbsp;<img src="@Url.Content("~/images/ajax-loader1.gif")" width="54" height="55" /></p>');
                    $("#plan").html(data);
                });

});   
       </script> 

The call to the controller isn’t made

Answer 1

 $(":radio").live("click", function () {
var inputValue = $('input:radio:checked').val(); 
});
or to keep the value of the selected Radiobutton on to hidden field
<input  type="radio" id="SelectedPlanType" rel="1"  name="Plan1" value='1' onClick="document.getElementById('hiddenfield').value=this.value"  checked="checked">
<input type="hidden" name="SelectedPlanType" value="" id="hiddenfield" />