Load Different partial views on radio button click

Question

I am trying to load different partial views in a single div by depending on radio button selection. when the user clicks on Individual button that partial view should appear, if click on Business then Business Partial view should appear

My view page code is

<script type="text/javascript">
    $(function () {
        $("[name=RegesterHere]").on('change', function () {
            var $radio = $(this);

            $.ajax({
                url: '@Url.Action("GetRegisterForm", "Home")',
                data: RegesterHere = $radio.val(),
                type: 'GET',
                success: function (data) {
                    $("#loadpartial").html(data);
                }
            });
        });
    });
</script>

<h2>GetRegisterForm</h2>
<table>

    <tr>
        <td colspan="1">@Html.LabelFor(m => m.RegesterHere)</td>
        <td colspan="2">@Html.RadioButtonFor(m => m.RegesterHere, "Individual") Individual
                          @Html.RadioButtonFor(m => m.RegesterHere, "Business") Business</td>
    </tr>
</table>

<div id="loadpartial">
</div>

and my controller code is

[HttpGet]
        public ActionResult GetRegisterForm(string RegesterHere)
        {
            if (RegesterHere == "Individual")
            {
                return PartialView("IndividualPartialViewName");
            }
            else
            {
                return PartialView("BusinessPartialViewName");
            }

        }

When I am running this code, second partial view is directly appearing. Please help me that what ever radio button is clicked then the corresponding partial view should be loaded

try adding the checked selector. see here http://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button — Matt Bodily, Jun 03 '14 at 14:08

score 0 · Accepted Answer · answered Jun 03 '14 at 14:17

It appears that you may not be getting the radio button value that's actually checked. You may want to try this to get the checked radio button value:

var value = $("input[name='RegesterHere']:checked").val();

and then use this in the ajax call:

data: RegesterHere = value,

Load Different partial views on radio button click

1 Answers1

Linked