How to do more than one type="radio" field without losing value?

Asked

Viewed 31 times

3

I am making a form and it will have two fields for selection of items, ie they are type="radio", only that the following problem happens when it selects an alternative of the first question ta right, but when it selects the second the first unchecks, I’ll send my code and you help me it’s a simple thing only I’m not getting.

<div>
    <div class="col-md-12">		                                   	
        <label for="gender">
            Melhor forma para contato:
        </label>
    </div>                                
    <div class="col-md-push-2 col-md-6 padding-botton">
        <label for="tfixo">
            <input id="tfixo" type="radio" name="gender" value="t-fixo"> 
            Tel. Fixo
        </label><br>
        <label for="tcel">
            <input id="tcel" type="radio" name="gender" value="t-cel"> 
            Tel. Celular
        </label><br>
        <label for="emaill">
            <input id="emaill" type="radio" name="gender" value="email"> 
            E-mail
        </label>
    </div>
</div>
<div>
    <div class="col-md-12">
        <label>
            Melhor horário para contato:
        </label>
    </div>
    <div class="col-md-push-2 col-md-6 padding-botton">
        <label for="manha">
            <input id="manha" type="radio" name="gender" value="manha"> 
            Manhã
        </label><br>
        <label for="tarde">
            <input id="tarde" type="radio" name="gender" value="tarde"> 
            Tarde
        </label><br>
    </div>
</div>

2 answers

4

You’re doing the same name="gender" both of them. That name must be unique to each group.

The name is the way the browser knows that these inputs belong to the same group, or that only one of them can be chosen at a time.

So you have to change the name of the second group for example timeofday for inputs choosing morning/afternoon:

<div class="col-md-push-2 col-md-6 padding-botton">
    <label for="manha">
        <input id="manha" type="radio" name="timeofday" value="manha"> 
        Manhã
    </label><br>
    <label for="tarde">
        <input id="tarde" type="radio" name="timeofday" value="tarde"> 
        Tarde
    </label><br>
</div>

1


You cannot use the gender field type of another, you need to separate, see I changed to period, the value is not wrong.

<div>
    <div class="col-md-12">		                                   	
        <label for="gender">
            Melhor forma para contato:
        </label>
    </div>                                
    <div class="col-md-push-2 col-md-6 padding-botton">
        <label for="tfixo">
            <input id="tfixo" type="radio" name="gender" value="t-fixo"> 
            Tel. Fixo
        </label><br>
        <label for="tcel">
            <input id="tcel" type="radio" name="gender" value="t-cel"> 
            Tel. Celular
        </label><br>
        <label for="emaill">
            <input id="emaill" type="radio" name="gender" value="email"> 
            E-mail
        </label>
    </div>
</div>
<div>
    <div class="col-md-12">
        <label>
            Melhor horário para contato:
        </label>
    </div>
    <div class="col-md-push-2 col-md-6 padding-botton">
        <label for="manha">
            <input id="manha" type="radio" name="periodo" value="manha"> 
            Manhã
        </label><br>
        <label for="tarde">
            <input id="tarde" type="radio" name="periodo" value="tarde"> 
            Tarde
        </label><br>
    </div>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.