SSS SSS - 4 days ago 5
CSS Question

How to link fancy radio buttons to same ID?

I would like to use these funky radio buttons (http://bootsnipp.com/snippets/featured/funky-radio-buttons) though the radio buttons have an id=radio1, id=radio2, id=radio3 etc

I would like all of them to have id-radio1 so it writes the result to radio1 in the database:

Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:

<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>


$Gender=$_POST["Gender"];

INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')

Though, with the funky radio buttons chaning from this:

<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>

</div>


to this doesn't work - it doesn't allow me to toggle radio buttons:

<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>

</div>


What is stopping the toggle?
Thank you!

Answer

Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.

id's should always be unique.

<div class="funkyradio">
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio1" />
        <label for="radio1">Male</label>
    </div>
    <div class="funkyradio-primary col-md-6">
        <input type="radio" name="radio1" id="radio2"/>
        <label for="radio2">Female</label>
    </div>
</div>

If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.

Comments