I have radio buttons from 1 to 5. When user select 1, 2 or 3 i wish to activate a select field. Whe he select 4 or 5 the select field should remain desactivated (or hidden).
Is this possible to do with this tool ?

Hello Manuel, this could be done using html5 data bindings.

That could be nice if we have a tutorial. Thanks.

Hi Manuel,
Please provide a link to your page, where i can see how your check boxes are set up and i will provide you with a step by step explanation how to show/hide a container based on check box selection.

Hi Teodor. Here's a testing page: alabe.pt/pt/prova/user_area/form_prova2.php

For "Aroma_COMPLEXIDADE *", when the user select 1, 2 or 3 the select field " Defeito" should visible or activated ( or both) and required. When the user select 4, 5, 6 or 7 it's the opposite, the field " Defeito"should remain unvisible or deactivated (or both) and not required

Any help please. Thanks

Hi Manuel,

Selecting the input, you could just use the following rules with the radio group selected as a check:


The just add the values in the code:
data-binding-disabled="{{$FORM.aroma_complexidade <= 3}}" data-binding-required="{{$FORM.aroma_complexidade >= 3}}"

Hi. Thanks for the support.
I change a little bit the code but now i have it working like i wish. When the user select the 4, 5, 6 or 7 the field "defeito" is deactivated and it's only activated with 1, 2 or 3. The problem is that the field "defeito" should be deactivated by default when page loads and even if i check the disable option i can't have it disable when page loads

Another related question ... i wonder to know if i could do this at the same time with Aroma_INTENSIDADE and how to do it?
Please check the form again.

Again, thanks!

Hello - what do you mean by: " i wonder to know if i could do this at the same time with Aroma_INTENSIDADE and how to do it?"

well, i do this for Aroma_Complexidade and i need to do the same for Aroma_Intensidade

But do you need both of the radio groups to control the same dropdown at the same time? Or separate dropdowns? I am not sure i get your idea?

I need both of the radio groups to control the same dropdown at the same time.

So what exactly the rules be? When should the dropdown be enabled and when disabled?
Please be as detailed as possible, when asking for custom solutions.

The user should only be able to select 1, 2 or 3 Aroma_Intensidade and Aroma Complexidade when he select the dropdown "defeito"

I really got confused.
Do you want to disable the dropdown - if yes WHEN exactly?

Do you want to disable some radio buttons - when exactly?

Please describe the relations/conditions you want to apply as it is really hard to get it looking at your form.

Sorry for the confusion!

1ª Initially all the radio buttons should be enable and the select field must be disable
2ª 1ª : The user should only be able to select only 1, 2 or 3 Aroma_Intensidade and Aroma Complexidade when he select the dropdown "defeito"
3ª The dropdown "defeito" should be activated and required only when user choose 1, 2 or 3 Aroma Complexidade
4ª: If user choose 4 (or 5, 6 or 7) for Aroma_Intensidade and choose 3 (or 2 or 1) on Aroma Complexidade that must be not allowed ... he have to choose 3 on Aroma_Intensidade

These are the conditions. Hope to be clear now.

Your explanation is still confusing. Here is what i have done, you can just follow what i did there to complete it the way you need it ...

<table width="100%" cellspacing="6" cellpadding="0" border="0" class="data-table">
    <caption>
      AROMA
  </caption>
    <tbody>
      <tr>
        <th scope="col" colspan="2">AROMA</th>
      </tr>
      <tr>
        <th>Aroma_INTENSIDADE *</th>
        <td><p>
          <label>
            <input type="radio" value="1" id="aroma_intensidade_1" required="required" name="aroma_intensidade" aria-required="true">
            Nula (1)</label>
          <label>
            <input type="radio" value="2" id="aroma_intensidade_2" required="required" name="aroma_intensidade" aria-required="true">
            Muito baixo (2)</label>
          <label>
            <input type="radio" value="3" id="aroma_intensidade_3" required="required" name="aroma_intensidade" aria-required="true">
            Baixo (3)</label>
          <label>
            <input name="aroma_intensidade" type="radio" required="required" id="aroma_intensidade_4" value="4" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Médio (4)</label>
          <label>
            <input type="radio" value="5" id="aroma_intensidade_5" required="required" name="aroma_intensidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Alto (5)</label>
          <label>
            <input type="radio" value="6" id="aroma_intensidade_6" required="required" name="aroma_intensidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Muito alto (6)</label>
          <label>
            <input type="radio" value="7" id="aroma_intensidade_7" required="required" name="aroma_intensidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Alto (7)</label>
        </p></td>
      </tr>
      <tr>
        <th><a href="#"></a>Aroma_COMPLEXIDADE *<a id="p7Tooltip_2" class="p7TTM_trg" title="" href="#"><i class="fa fa-info-circle fa-lg"></i></a></th>
        <td><p>
          <label>
            <input name="aroma_complexidade" type="radio" required="required" id="aroma_complexidade_1" value="1" aria-required="true" data-binding-disabled="{{$FORM.aroma_intensidade > 3}}" >
            Nula (1)</label>
          <label>
            <input type="radio" value="2" id="aroma_complexidade_2" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.aroma_intensidade > 3}}">
            Muito baixo (2)</label>
          <label>
            <input type="radio" value="3" id="aroma_complexidade_3" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.aroma_intensidade > 3}}">
            Baixo (3)</label>
          <label>
            <input type="radio" value="4" id="aroma_complexidade_4" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Médio (4)</label>
          <label>
            <input type="radio" value="5" id="aroma_complexidade_5" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Alto (5)</label>
          <label>
            <input type="radio" value="6" id="aroma_complexidade_6" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Muito alto (6)</label>
          <label>
            <input type="radio" value="7" id="aroma_complexidade_7" required="required" name="aroma_complexidade" aria-required="true" data-binding-disabled="{{$FORM.defeitos_aroma}}">
            Alto (7)</label>
        </p></td>
      </tr>
      <tr>
        <td colspan="2"><strong><em>[ Nota 1, 2 ou 3 deve assinalar defeito] &gt;&gt;&gt;</em> Defeito</strong>:
          <select name="defeitos_aroma" class="valid" form="formprova" aria-invalid="false" data-binding-disabled="{{$FORM.aroma_complexidade > 3}}">
            <option value=""></option>
            <option value="Mofo">Mofo</option>
            <option value="Oxidado">Oxidado</option>
            <option value="Reduzido">Reduzido</option>
            <option value="Acidez Volátil">Acidez Volátil</option>
            <option value="Fenóis Voláteis">Fenóis Voláteis</option>
            <option value="Herbáceo (Exc.)">Herbáceo (Exc.)</option>
            <option value="Sulfuroso (Exc.)">Sulfuroso (Exc.)</option>
            <option value="Artificial">Artificial</option>
            <option value="Madeira (Exc.)">Madeira (Exc.)</option>
            <option value="Outro">Outro</option>
          </select>
        </td></tr></tbody></table>

Hi again. Thanks for the excelent support.
That's ok now!

Sorry again. This is another related question. How to fill the form in a sequencial order? Only if user fill the first field could fill the second and so on ...
1: Limpidez
2: Cor (TONALIDADE)
3: Cor (INTENSIDADE)
4: Aroma_INTENSIDADE
5: Aroma_COMPLEXIDADE
6: Sabor_INTENSIDADE
7: Sabor_COMPLEXIDADE
8: Sabor_EQUILÍBRIO/CORPO

Well just apply the disabled and use the field you want to be filled, as an expression. Example

[field 1]
[field 2 data-binding-disabled="{{$FORM.field1 != ''}}" ]

Thanks for the support

Hi again Teodor.

Sorry to bother you again with this issue, but when i aplly html5 form validator i can't submit the form ... could you please check this: alabe.pt/pt/prova/user_area/form_prova2.php

Hm, there is something strange indeed. Please try removing the empty action="" tag from your form and try again.

Just do it, but the problem remains.

Do you have any script, except to the validator/server connect bound to form submission or to the form?

Got it ... it's because of that.

Again, many thanks