CODEWITHSUNDEEP
c#javascriptjqueryajaxasp.net-mvc
Franklin Joseph Moormann
Franklin Joseph Moormann

Reputation: 71

Trying to get value of selected radio button using ajax/jquery

I'm trying to get the value of whichever radio button is selected using ajax and jquery but I have only been able to do the following and of course it only works if that radio button is selected or not. What am I doing wrong?

$('#urgencyJList').change(function () {
            var modelData = {
                paperType: $("#paperTypeJList").val(),
                urgency: $("#urgencyJList").val(),
                numOfPages: $("#numOfPagesJList").val(),
                **spacing: $("#doubleSpacingV").val()**
            };

            $.ajax({
                url: '@Url.Action("getNewPrice","Home")',
                data: modelData,
                type: "POST",
                cache: false,
                async: true,
                success: function (response) {
                    document.getElementById('priceLabel').innerHTML = response;
                }
            });
        });

My code for the radio buttons is below:

<div class="row">
    @Html.LabelFor(model => model.spacing, "Spacing:")
    <fieldset>
        <label for="doubleSpacingV">
            Double Spacing
            @Html.RadioButtonFor(model => model.spacing, "double", new { id = "doubleSpacingV", @checked = true })
        </label>
        <label for="singleSpacingV">
            Single Spacing
            @Html.RadioButtonFor(model => model.spacing, "single", new { id = "singleSpacingV" })
        </label>
        @Html.ValidationMessageFor(model => model.spacing)
    </fieldset>
</div>

Upvotes: 1

Views: 2494

Answers (1)

Satpal
Satpal

Reputation: 133403

Change Your HTML as, Here I have added common class spacingCheckBox to radio buttons

<fieldset>
    <label for="doubleSpacingV">
        Double Spacing
        @Html.RadioButtonFor(model => model.spacing, "double", new { @class = "spacingCheckBox", @checked = true })
    </label>
    <label for="singleSpacingV">
        Single Spacing
        @Html.RadioButtonFor(model => model.spacing, "single", new { @class = "spacingCheckBox" })
    </label>
    @Html.ValidationMessageFor(model => model.spacing)
</fieldset>

To retrieve checked checkbox value use

spacing: $('.spacingCheckBox:checked').val()

Note: I have not tested it

Upvotes: 3

Related Questions