Solution 1 :

it seems you gave the same ids of the 1st and 2nd labels and input to the 3/4 and 5th labels and inputs ids

Try to give unique matching for every “id” and “for”

Hope I could help

With that it’s working on my environment with bootstrap.

Problem :

I have an HTML with 2 forms. I want to be able to select one from the first two and one from the next three radio buttons. How to I achieve this? Given below is the html snippet:

<form method="POST" action="/profiles/adminKaLogin/">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample" value="1">
            <label class="custom-control-label" for="defaultInline1">Vendor 1</label>
        </div>

        <!-- Default inline 2-->
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample" value="2">
            <label class="custom-control-label" for="defaultInline2">Vendor 2</label>
        </div>

    <h3> Select time period</h3>

        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample1" value="1m">
            <label class="custom-control-label" for="defaultInline1">1 Month</label>
        </div>  
        <!-- Default inline 2-->
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample1" value="2m">
            <label class="custom-control-label" for="defaultInline2">2 Months</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample1" value="6m">
            <label class="custom-control-label" for="defaultInline2">6 Months</label>
        </div>
        <button type="submit" class="btn btn-primary" name="form1">Submit</button>
    </form>

Note that these buttons have to be in groups of 2 and 3, because I have different uses for them in the backend. Thanks.

Comments

Comment posted by Professor Abronsius

none of your input elements have values. When you say you

Comment posted by DHRUV KAUSHAL

Ah sorry. Have updated the post with values. So what i am trying to do is to get user to select vendor(first two options) and the time period(last 3 options), based on which I will do retrievals. The problem that I am facing is that I am not able to select any of the three last buttons.

Comment posted by Professor Abronsius

" I am not able to select any of the three last buttons"

Comment posted by DHRUV KAUSHAL

I don’t know why it isn’t working for me. I am able to select between the first two options(vendor 1 and vendor 2) only, unable to choose from the next 3 buttons.

Comment posted by DHRUV KAUSHAL

It’s working fine in the online editors where bootstrap isn’t involved, maybe it is something about classes or id’s that I am unable to catch.

By