{"id":16047001,"date":"2022-09-27T10:12:16","date_gmt":"2022-09-27T10:12:16","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/multiple-conditional-elements\/"},"modified":"2022-09-27T10:12:16","modified_gmt":"2022-09-27T10:12:16","slug":"multiple-conditional-elements","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/multiple-conditional-elements\/","title":{"rendered":"Multiple conditional elements"},"content":{"rendered":"

Dear support team,<\/p>\n

thank you very much for the great plugin. I recently switched from CF7 and its great!<\/p>\n

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<\/code>, something like data-show-if:FIELD-1:value-1 FIELD-2 value-2<\/code>, but I dont think that is possible? At least I tried different combinations and none of them worked.<\/p>\n

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<\/code>. But for the MAKER it is more complicated, because the text inputs for MAKER_OTHERS<\/code> and MODEL_OTHERS<\/code> need to be shown (and MODEL needs to be hidden, which works fine).<\/p>\n

A reduced example of the code, without the Javascript to make the chained select possible.<\/p>\n

\n<p>\n\t<label for="MAKER">Maker<\/label>\n\t<select name="MAKER" required id="MAKER">\n        <option>Audi<\/option>\n        <option>Ford<\/option>\n        <option>Other<\/option>\n    <\/select>\n<\/p>\n<p data-hide-if="MAKER:Other">\n\t<label for="MODEL">Maker<\/label>\n\t<select name="MODEL" required id="MODEL">\n        <option>A1<\/option>\n        <option>A2<\/option>\n        <option>Fiesta<\/option>\n        <option>F-150<\/option>\n        <option>Other<\/option>\n    <\/select>\n<\/p>\n\n<p data-show-if="MAKER:Other">\n\t<label for="MAKER_OTHERS">Maker (others)<\/label>\n\t<input type="text" name="MAKER_OTHERS" required id="MAKER_OTHERS" \/>\n<\/p>\n<p  data-show-if="MODEL:Other MAKER:Other">\n\t<label for="MODEL_OTHERS">Model (others)<\/label>\n\t<input type="text" name="MODEL_OTHERS" required id="MODEL_OTHERS" \/>\n<\/p>\n<\/code><\/pre>\n","protected":false},"template":"","class_list":["post-16047001","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/16047001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/16047001\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=16047001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}