How to make more than one field type="radio" without another losing the value?

3

I'm making a form and it will have two fields for selecting items, ie they are type="radio", but the following problem occurs when it selects an alternative to the first question, but when it selects the second to the first uncheck, I will send my code and you help me is simple thing only I can not.

<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>
    
asked by anonymous 10.08.2016 / 16:14

2 answers

1

You can not use the same gender field type as another, need to separate, see changed to period, value does not go 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>
    
10.08.2016 / 16:25
4

You're giving the same name="gender" to both. This name must be unique for each group.

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

So you have to change the name of the second group to eg timeofday for the inputs that choose 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>
    
10.08.2016 / 16:15