Title: Multiple conditional elements
Last modified: September 27, 2022

---

# Multiple conditional elements

 *  Resolved [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/)
 * Dear support team,
 * thank you very much for the great plugin. I recently switched from CF7 and its
   great!
 * I am trying to build out a condtional forms that is a little bit more complicated.
   I would like to use two fields with `data-show-if`, something like `data-show-
   if:FIELD-1:value-1 FIELD-2 value-2`, but I dont think that is possible? At least
   I tried different combinations and none of them worked.
 * To give you some background on what I am trying to achive: I have a chained select
   like car makers and models. But the lists are incomplete so user should be able
   so select “other” and in this case a text field is shown to input another maker
   or model. For the model it works great. I can just add a text input field with`
   data-show-if:MODEL:Other`. But for the MAKER it is more complicated, because 
   the text inputs for `MAKER_OTHERS` and `MODEL_OTHERS` need to be shown (and MODEL
   needs to be hidden, which works fine).
 * A reduced example of the code, without the Javascript to make the chained select
   possible.
 *     ```
       <p>
       	<label for="MAKER">Maker</label>
       	<select name="MAKER" required id="MAKER">
               <option>Audi</option>
               <option>Ford</option>
               <option>Other</option>
           </select>
       </p>
       <p data-hide-if="MAKER:Other">
       	<label for="MODEL">Maker</label>
       	<select name="MODEL" required id="MODEL">
               <option>A1</option>
               <option>A2</option>
               <option>Fiesta</option>
               <option>F-150</option>
               <option>Other</option>
           </select>
       </p>
   
       <p data-show-if="MAKER:Other">
       	<label for="MAKER_OTHERS">Maker (others)</label>
       	<input type="text" name="MAKER_OTHERS" required id="MAKER_OTHERS" />
       </p>
       <p  data-show-if="MODEL:Other MAKER:Other">
       	<label for="MODEL_OTHERS">Model (others)</label>
       	<input type="text" name="MODEL_OTHERS" required id="MODEL_OTHERS" />
       </p>
       ```
   

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16053029)
 * It’s not pretty, but I guess I would do it like this:
 *     ```
       <p>
       <label for="MAKER">Maker</label>
       <select name="MAKER" required id="MAKER">
       <option>Audi</option>
       <option>Ford</option>
       <option>Other</option>
       </select>
       </p>
       <p data-hide-if="MAKER:Other">
       <label for="MODEL">Model</label>
       <select name="MODEL" required id="MODEL">
       <option>A1</option>
       <option>A2</option>
       <option>Fiesta</option>
       <option>F-150</option>
       <option>Other</option>
       </select>
       </p>
   
       <p data-show-if="MAKER:Other">
       <label for="MAKER_OTHERS">Maker (others)</label>
       <input type="text" name="MAKER_OTHERS" required id="MAKER_MODEL_OTHERS" />
         <input type="text" name="MAKER_MODEL_OTHERS" required id="MAKER_MODEL_OTHERS" />
       </p>
       <p data-show-if="MODEL:Other|MAKER:Other">
       <label for="MODEL_OTHERS">Model (others)</label>
       <input type="text" name="MODEL_OTHERS" required id="MODEL_OTHERS" />
       </p>
       ```
   
 * Hope that helps. If you have any questions, please let me know!
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16053946)
 * Hi,
 * thank you very much for your response. I cam up with a simlar, dirty solution
   were I have two input field for MODEL_OTHERS.
 * But in youe example you use `data-show-if="MODEL:Other|MAKER:Other"`. Is that
   really supported? I tried using it and it only works for the first element, `
   MODEL:Other` in this example. I think the `|` to declare and OR relationship 
   only works for values not elements or am I mistaken?
 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16054086)
 * Hi, it is not, sorry that must have been a left behind trial and error bit 😉
 * One thing about the dirty solution, I think the fields should not have the same
   field name if it’s a duplicate field, else it might only pick up the value of
   the last occurrence.
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16054334)
 * Hi,
 * I already change the duplicate names and also added some server side validation.
 * Playing around with the `data-hide-if` attribute I think I encountered a bug 
   when using a `required` input.
 * In that case HTMLForms removes the `required` attribute from the input element
   and replaces it with a `data-was-required:true` attribute. Thats a nice solution
   to add detect if a ‘required’ tag needs to be added back, but it is not added
   back. That leads to problems with front-end form validation, because fields that
   were set as required are not required anymore.
 * I build a simple example with `data-hide-if`, to show the problem.
 *     ```
       <p>
         <label for="SELECT_1">Select a option</label>
         <select name="SELECT_1" required id="SELECT_1">
           <option value="" disabled selected hidden>Select</option>
           <option value="One">One (hides the text field)</option>
           <option value="Two">Two</option>
         </select>
       </p>
       <p data-hide-if="SELECT_1:One">
       	<label for="HIDDEN_TEXT">Text field (is hidden if you select one)</label>
       	<input type="text" name="HIDDEN_TEXT" required id="HIDDEN_TEXT" />
       </p>
       <p>
       	<input type="submit" value="Absenden" />
       </p>
       ```
   
 * In this example the text field is set as `required`, but this attribute is remove
   by HTMLForms on page load an replaced with `data-was-required:true`. I would 
   expect the text field to required, so that the form valdiation works and it is
   not possible to submit the form with an empty text field.
 * If I use `data-show-if` it works as expected. But it is not always possible to
   use `data-show-if` instead of `data-hide-if`:
 *     ```
       <p>
         <label for="SELECT_1">Select a option</label>
         <select name="SELECT_1" required id="SELECT_1">
           <option value="" disabled selected hidden>Select</option>
           <option value="One">One (shows the text field)</option>
           <option value="Two">Two</option>
         </select>
       </p>
       <p data-show-if="SELECT_1:One">
       	<label for="HIDDEN_TEXT">Text field (is visible if you select one)</label>
       	<input type="text" name="HIDDEN_TEXT" required id="HIDDEN_TEXT" />
       </p>
       <p>
       	<input type="submit" value="Absenden" />
       </p>
       ```
   
    -  This reply was modified 3 years, 7 months ago by [yann1ck](https://wordpress.org/support/users/ja4st3r/).
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16077063)
 * Hi [@lapzor](https://wordpress.org/support/users/lapzor/) did you perhaps miss
   my addtional question, because the topic is already marked as resolved?
 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16082174)
 * Thanks for reminding me. I’ve just checked your example code on my test site,
   and it works as it should (the field is required).
 * Where can I test this on your site where the issue exists?
    Are you using anything
   to combine or compress JS code?
 * Thanks for letting me know.
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16106784)
 * Hi Lap,
 * thank ou very much for your response and I am super sorry that I didnt answer
   las week, but it was a busy week.
 * I am not using anything to combine and minify JS.
 * You can test on this site: [https://masterliste.psyfako.org/test-formular/](https://masterliste.psyfako.org/test-formular/)
 * The forms are exactly the two forms from above. Its a Divi site but I have the
   same problem on a staging site that using a clean install.
 * Do you need more information?
 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16106815)
 * Here is my test with a copy of the code you shared above: <redacted>
 * As you can see, it works there!
    Can you share the staging site as well? If you
   prefer you can email us on [support@htmlformsplugin.com](https://wordpress.org/support/topic/multiple-conditional-elements/support@htmlformsplugin.com?output_format=md)
 * Kind regards,
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16106979)
 * Hi Lap,
 * your example shows the working example with `data-show-if`, not the not-working
   one with `data-hide-if`. Form 1 in my example.
 * In that example the `HIDDEN_TEXT` input is set as required, but I am able to 
   submit the form even if the input field is empty. The validation is not working
   because HTML Forms removes the `required` attribute and replaces it with `data-
   was-required:true`. I would expect the `required` attribute to be added back 
   if a input field is not hidden.
 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16107152)
 * Ah ok sorry I must have misread it or accidentally copied the wrong one.
    I’ve
   confirmed and replicated the issue and created a bug report here: [https://github.com/ibericode/html-forms/issues/117](https://github.com/ibericode/html-forms/issues/117)
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16107179)
 * Hi, thank you very much for looking into the error and creating a bug report!
   🙂
 *  Thread Starter [yann1ck](https://wordpress.org/support/users/ja4st3r/)
 * (@ja4st3r)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16384342)
 * Hi Lap,
 * is that bug on the roadmap for a future version? I tried to fix it myself yesterday,
   playing around with the conditionality.js, but it is beyond my abilities 😀
 * Kind Regards
 * Yannick
 *  [Lap](https://wordpress.org/support/users/lapzor/)
 * (@lapzor)
 * [3 years, 4 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16384827)
 * Yes it’s definitely on the roadmap to fix this issue. 
   When exactly this will
   be fixed I can’t say yet though.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Multiple conditional elements’ is closed to new replies.

 * ![](https://ps.w.org/html-forms/assets/icon-256x256.png?rev=1754345)
 * [HTML Forms - Simple WordPress Forms Plugin](https://wordpress.org/plugins/html-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/html-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/html-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/html-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/html-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/html-forms/reviews/)

 * 13 replies
 * 2 participants
 * Last reply from: [Lap](https://wordpress.org/support/users/lapzor/)
 * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/multiple-conditional-elements/#post-16384827)
 * Status: resolved