CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SSS
SSS

Reputation: 53

How to link fancy radio buttons to same ID?

I would like to use these 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!

Upvotes: 0

Views: 1760

Answers (2)

andi
andi

Reputation: 6522

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.

Upvotes: 1

Cody Patterson
Cody Patterson

Reputation: 138

TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".

Additional information about id and class though you might find useful as an internet programmer:

The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.

Here is a working solution to the code you provided:

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

I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.

Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:

<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>

Hope this was useful!

Upvotes: 2

Related Questions