Forums » Plugin: HTML Forms » Multiple conditional elements

  • Resolved yann1ck

    (@ja4st3r)


    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)
  • Plugin Contributor Lap

    (@lapzor)

    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

    (@ja4st3r)

    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?

    Plugin Contributor Lap

    (@lapzor)

    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

    (@ja4st3r)

    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 1 year, 6 months ago by yann1ck.
    Thread Starter yann1ck

    (@ja4st3r)

    Hi @lapzor did you perhaps miss my addtional question, because the topic is already marked as resolved?

    Plugin Contributor Lap

    (@lapzor)

    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

    (@ja4st3r)

    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/

    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?

    Plugin Contributor Lap

    (@lapzor)

    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

    Kind regards,

    Thread Starter yann1ck

    (@ja4st3r)

    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.

    Plugin Contributor Lap

    (@lapzor)

    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

    Thread Starter yann1ck

    (@ja4st3r)

    Hi, thank you very much for looking into the error and creating a bug report! 🙂

    Thread Starter yann1ck

    (@ja4st3r)

    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

    Plugin Contributor Lap

    (@lapzor)

    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.