Cyber Monday Sale! Use DMXCYBER24 promo code for 50% OFF.

HTML5 Form Validator Support Product Page

Answered

radio button conditional validation

Asked 02 Mar 2016 16:34:58
1
has this question
02 Mar 2016 16:34:58 manuel pinto posted:
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 ?

Replies

Replied 02 Mar 2016 16:56:26
02 Mar 2016 16:56:26 Teodor Kuduschiev replied:
Hello Manuel, this could be done using html5 data bindings.
Replied 03 Mar 2016 09:58:53
03 Mar 2016 09:58:53 manuel pinto replied:
That could be nice if we have a tutorial. Thanks.
Replied 07 Mar 2016 09:42:46
07 Mar 2016 09:42:46 Teodor Kuduschiev replied:
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.
Replied 07 Mar 2016 10:33:21
07 Mar 2016 10:33:21 manuel pinto replied:
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
Replied 14 Mar 2016 16:21:49
14 Mar 2016 16:21:49 manuel pinto replied:
Any help please. Thanks
Replied 14 Mar 2016 17:57:29
14 Mar 2016 17:57:29 Teodor Kuduschiev replied:
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}}"
Replied 15 Mar 2016 10:28:07
15 Mar 2016 10:28:07 manuel pinto replied:
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!
Replied 15 Mar 2016 11:02:08
15 Mar 2016 11:02:08 Teodor Kuduschiev replied:
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?"
Replied 15 Mar 2016 12:54:07
15 Mar 2016 12:54:07 manuel pinto replied:
well, i do this for Aroma_Complexidade and i need to do the same for Aroma_Intensidade
Replied 15 Mar 2016 13:15:40
15 Mar 2016 13:15:40 Teodor Kuduschiev replied:
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?
Replied 15 Mar 2016 14:03:29
15 Mar 2016 14:03:29 manuel pinto replied:
I need both of the radio groups to control the same dropdown at the same time.
Replied 15 Mar 2016 14:14:20
15 Mar 2016 14:14:20 Teodor Kuduschiev replied:
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.
Replied 15 Mar 2016 14:17:49
15 Mar 2016 14:17:49 manuel pinto replied:
The user should only be able to select 1, 2 or 3 Aroma_Intensidade and Aroma Complexidade when he select the dropdown "defeito"
Replied 15 Mar 2016 14:20:26
15 Mar 2016 14:20:26 Teodor Kuduschiev replied:
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.
Replied 15 Mar 2016 14:35:04
15 Mar 2016 14:35:04 manuel pinto replied:
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.

Replied 15 Mar 2016 15:05:27
15 Mar 2016 15:05:27 Teodor Kuduschiev replied:
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>

Replied 15 Mar 2016 16:51:16
15 Mar 2016 16:51:16 manuel pinto replied:
Hi again. Thanks for the excelent support.
That's ok now!
Replied 15 Mar 2016 16:59:30
15 Mar 2016 16:59:30 manuel pinto replied:
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
Replied 15 Mar 2016 17:09:39
15 Mar 2016 17:09:39 Teodor Kuduschiev replied:
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 != ''}}" ]
Replied 15 Mar 2016 22:16:57
15 Mar 2016 22:16:57 manuel pinto replied:
Thanks for the support
Replied 16 Mar 2016 13:16:07
16 Mar 2016 13:16:07 manuel pinto replied:
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

Replied 16 Mar 2016 13:27:57
16 Mar 2016 13:27:57 Teodor Kuduschiev replied:
Hm, there is something strange indeed. Please try removing the empty action="" tag from your form and try again.
Replied 16 Mar 2016 14:21:20
16 Mar 2016 14:21:20 manuel pinto replied:
Just do it, but the problem remains.
Replied 16 Mar 2016 14:38:39
16 Mar 2016 14:38:39 Teodor Kuduschiev replied:
Do you have any script, except to the validator/server connect bound to form submission or to the form?
Replied 16 Mar 2016 15:44:01
16 Mar 2016 15:44:01 manuel pinto replied:
Got it ... it's because of that.

Again, many thanks

Reply to this topic