Case Example: Where a user selects 3 drinks, they get asked if they would like a courtesy hot chocolate in a second form field that conditionally appears. The first form field is always required, the second is required when the condition of field 1 is met. Where the user changes the value of the first form field back to less than 3 drinks, the second (conditional) form field, that asks if they’d like a courtesy hot chocolate, is disabled from being required and disappears.
I have got as far as setting div display to hidden for the conditional field.
What I am looking to achieve
- Showing/Hiding/Disabling and Enabling “Required” for a conditional form field based on another value (such as a HTML slider or a radio button being the first field).
My form is created using HTML and PHP, my intention is to insert it as a code snippet into WordPress using a third party module. I also use Elementor. I’d ideally like the form to inherit Elementor’s styling. One of the problems that I envisage is adding two classes to the same widget in Elementor.
Questions:
Would it cause any harm to declare classes inline (I can’t see any other option)? If there is a recommended alternative, please suggest it – Elementor is needed on my website though, as is WordPress.
Is it possible from a code snippet to have it inherit Elementor’s styling and how can I encourage this please?
Does the method of showing/hiding/disabling/enabling the requirement of completion on a form field differ in any way depending on the “triggering” or the “conditionally appearing” field depending on if the “triggering” field is a radio button, checkbox, dropdown value or a Range slider please?
I’m not a javascript coder – if I spent my life learning every coding language just to be able to achieve a basic aim, i’d never get on with my overall goal so there has to be a sanity cut-off point but please could someone point me in the right direction in terms of what I need from a Javascript point of view.
With many thanks and hopefully the question is useful to others too.
I have got as far as setting div display to hidden for the conditional field.