CODEWITHSUNDEEP
jqueryhtmlasp.net-mvcradio-group
BLoB
BLoB

Reputation: 9725

Different page radio buttons being pre-selected

There are two pages; Section 1 on the first page and Section 2 on the second page.

The issue is that when Section 1 radio button is selected, i.e. checked="checked" and continue on to Page 2 / Section 2 the first radio button is preselected?! Notice the checked="checked".

The names are the same because it is a dynamic questionnaire that is populated via RadioButtonFor via a view model.

Page 1 / Section 1 Radio button group:

Yes <input id="11" name="VIQuestions[1].Answer" type="radio" value="0">
No  <input id="12" name="VIQuestions[1].Answer" type="radio" value="1">
N/A <input id="13" name="VIQuestions[1].Answer" type="radio" value="2">

Page 2 / Section 2 Radio button group:

Yes <input id="71" name="VIQuestions[1].Answer" type="radio" value="0">
No  <input id="81" name="VIQuestions[1].Answer" type="radio" value="1">
N/A <input id="91" name="VIQuestions[1].Answer" type="radio" value="2">

I don't want to force the radio buttons to have nothing selected on page load because when the user submits the page and an error is found I want the browser to remember the users selections, so a blanket selection reset won't work.

I'm looking for a way so that when the first page is submitted, and no errors are found, then the second page loads; I then want to wipe any history of the selections made in page 1.

P.S. I think it's the name of the radio buttons, and their selections, being stored in the browser that is causing this, but it could be an MVC issue, I'm unsure.

EDIT: For completeness here is the MVC view code that outputs the radio buttons.

for (int j = 0; j < Model.VIQuestions.Count; j++)
{
    string questionId = Model.VIQuestions[j].VIQuestion_Id.ToString();

    <label><span>Yes</span>@Html.RadioButtonFor(m => m.VIQuestions[j].Answer, 1, new { id = questionId + 1 })</label>
    <label>&nbsp;&nbsp;<span>No</span>@Html.RadioButtonFor(m => m.VIQuestions[j].Answer, 2, new { id = questionId + 2 })</label>
    <label>&nbsp;&nbsp;<span>N\A</span>@Html.RadioButtonFor(m => m.VIQuestions[j].Answer, 3, new { id = questionId + 3 })</label>
}

Upvotes: 0

Views: 46

Answers (1)

Slicksim
Slicksim

Reputation: 7172

If you are using a form post to move between the pages of the questionnaire, then you will be hitting a feature where the model state is already pre-filled with the form values. This is in case you need to show the form should validation fail etc.

If you are happy with the form values and want the user to carry on, then either do

this.ModelState.Clear();

before you redisplay the form, or use

this.RedirectToAction( ...

and have each question as a separate request.

Upvotes: 2

Related Questions