.NET MVC - adding a radio button with new input

Question

I am new to C# and .NET MVC. I have a View page with a radio button with two options, those are tied to a controller. When I try to add a new radiobutton by copying the radio button code in the View page, the newly added radiobuttons act like a continuation of the existing radiobuttons with the same input. I would like to differentate both radio buttons and use the input from the newly added radiobuttons elsewhere. Parts from my controller and Viewpage are below. Please ask me if you need more information.

Viewpage:

    <div class="form-group">
        <div class="control-label col-md-2"></div>
        <div class="col-md-10">
            <div class="clearfix">
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="1" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
                </div>
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="2" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
                </div>
            </div>
        </div>
    </div>

    // ....

    <div class="form-group">
        <div class="control-label col-md-2"></div>
        <div class="col-md-10">
            <div class="clearfix">
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="3" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
                </div>
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="4" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
                </div>
            </div>
        </div>
    </div>

When I add the second radiobutton with values 3 and 4, I want it to be treated as a different input, not the same as the first radiobutton.

Can you help me with this?

Thanks!

You need to give the 'other' radio buttons a different `name` attribute — , Apr 03 '18 at 22:26

pmonty · Answer 1 · 2018-04-03T22:36:54.210

You will need to give the second radio button a different name, so in the below code I have given it the name="radiobtn2"

    <div class="clearfix">
        <div class="pull-left inline-radio">
            <input type="radio" name="radiobtn" value="1" class="clsradio" />
            <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
        </div>
        <div class="pull-left inline-radio">
            <input type="radio" name="radiobtn2" value="2" class="clsradio" />
            <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
        </div>
    </div>

So within a form no two radio buttons should have the same name attribute if you want them to perform different actions.

I would also suggest reading id vs. name

score 0 · Answer 2 · answered Apr 03 '18 at 23:19

Try this solution , it should fix your problem, it seems you are referring two different ratio buttons with same name radiobtn. that is causing issue.

Here i updated two radio buttons names like

 <input type="radio" name="radiobtnFirst" value="3" class="clsradio" />

 <input type="radio" name="radiobtnSecond" value="4" class="clsradio" />

Complete Form:

<div class="form-group">
        <div class="control-label col-md-2"></div>
        <div class="col-md-10">
            <div class="clearfix">
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="1" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
                </div>
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtn" value="2" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
                </div>
            </div>
        </div>
    </div>

    // ....

    <div class="form-group">
        <div class="control-label col-md-2"></div>
        <div class="col-md-10">
            <div class="clearfix">
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
                </div>
                <div class="pull-left inline-radio">
                    <input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
                    <label for="radiobtn">@kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
                </div>
            </div>
        </div>
    </div>

.NET MVC - adding a radio button with new input

2 Answers2