In the view, I have these two radio buttons:

@Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
@Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>

The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:

<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>

So far, all's well.

But, inside an onclick() event for a button, if I do this:

var values = 
    {
        "CampaignType": $('#CampaignType').val()
    }
alert(values.CampaignType);

The alert always es up as `Exclusive', even if I have changed the selection to 'Shared'.

What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?

In the view, I have these two radio buttons:

@Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
@Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>

The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:

<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>

So far, all's well.

But, inside an onclick() event for a button, if I do this:

var values = 
    {
        "CampaignType": $('#CampaignType').val()
    }
alert(values.CampaignType);

The alert always es up as `Exclusive', even if I have changed the selection to 'Shared'.

What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?

• javascript
• jquery
• html
• css
• asp-mvc

• 1 you have the same id for both inputs... – kukkuz Commented Jan 7, 2017 at 16:55
• ookkkayy... so, maybe back to MVC radio buttons 101? I thought they needed the same id to be in the same group? Meaning, so if one is checked, the other is unchecked. They are both populated from the same object in the model: CampaignType – Casey Crookston Commented Jan 7, 2017 at 16:56
• you are talking about the name attribute and not id... – kukkuz Commented Jan 7, 2017 at 16:57
• The name attribute groups radio buttons, names don't need to be unique. – Teemu Commented Jan 7, 2017 at 16:57
• Use $(:radio[name="CampaignType"]:checked').val() – Ibrahim Khan Commented Jan 7, 2017 at 16:58

1 Answer 1

So you can do start with these:

1. Remove the invalid ids - multiple ids are invalid in CSS. For getting the value of the checked radio button you can use:

   $('input[name=CampaignType]:checked').val()
   

   or

   $('input[type=radio]:checked').val()
   

2. For the label to work you have to link it with the corresponding radio button using the for attribute.

See demo below:

function submit() {
  var values = {
    "CampaignType": $('input[name=CampaignType]:checked').val()
  }
  console.log(values.CampaignType);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input checked="checked" id="CampaignType1" name="CampaignType" type="radio" value="Exclusive">
<label for="CampaignType1">Exclusive</label>
<input id="CampaignType2" name="CampaignType" type="radio" value="Shared">
<label for="CampaignType2">Shared</label>
<br/>
<button onclick="submit()">click here</button>

All the best!