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 likedata-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 forMAKER_OTHERSandMODEL_OTHERSneed 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>
-
Hi,
I already change the duplicate names and also added some server side validation.
Playing around with the
data-hide-ifattribute I think I encountered a bug when using arequiredinput.In that case HTMLForms removes the
requiredattribute from the input element and replaces it with adata-was-required:trueattribute. 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 withdata-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-ifit works as expected. But it is not always possible to usedata-show-ifinstead ofdata-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>
- The topic ‘Multiple conditional elements’ is closed to new replies.
