Is it possible for you to create a CSS code with logic?

Does Jotform have Javascripters or Javascript knowledge?

I do not know how much code is neccesary for what i want, but is it possible for you to create an example Javascript code with logic that i can clone and alter for other purposes in my form?

For example:

If field Geslacht (gender) = Male > then in field Bagage hide 'Beauty Case'.

Thanks in advance.

Sven

If you are looking to hide a form field based on an entry made on another form field, you can achieve that by suing conditional logic, which we already support on our forms:

https://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic

If you are looking to hide only certain options from a form field when another form field is selected, we cannot add any custom scripts to a JotForm form due to security restrictions. However, that can be achieved with what our forms currently have. Here is a demo form depicting it in action:

https://form.jotform.com/60896701938973

If that is what you were trying to achieve, here are the steps you can take to achieve the same thing on your form. We will need to use 1 show/hide condition, 1 form field, and a bit of custom CSS for each of the options you wish to hide.

1. We need to add a form field to your form, which we will be able to use inside our show/hide condition. I've used a Text field, and entered the text such as "Field for hiding Bagage: Beauty Case option":

Note: this field must be placed anywhere before the Bagage field on the form, because CSS can only work from previous field to the next one.

2. I've used a condition to hide this new field when Male is selected:

3. I've used custom CSS to (a) hide this new field from being seen on the form, as well as to (2) hide the Beauty Case option when this field was conditionally set to hidden.

3a) Since the ID of the Text element I've added is #id_140, my custom CSS for hiding this field is:

form>.form-all #id_140 {display:none;}

3b) since the IDs of the option Beauty Case are #label_input_81_7 for the label, and #input_81_7 for the input field, I used this code for conditionally hiding the options:

#id_140.form-field-hidden + #id_81 #input_81_7,
#id_140.form-field-hidden + #id_81 #label_input_81_7 { display: none; }

The result is as you see on the form linked above - when Male is selected, Beauty Case is hidden:

You can find out correct field IDs by right-clicking on them within your browser, and choosing the "Inspect Element" option in your browser. If you need any further assistance in setting it up, please let us know. We will be happy to help.

Thank you for you answer!

I cannot get it to work at this moment.
The Text field "Field for hiding Bagage > Beauty Case" i added to be hidden has id_147.

I set the conditional logic "when gender = equal to Man > hide above text field.

The CSS i used is:

form>.form-all #id_147 {display:none;

}

#id_147.form-field-hidden + #id_81 #input_81_7,

#id_147.form-field-hidden + #id_81 #label_input_81_7 { display: none; }

The text field gets hidden, but the option Beauty Case does not dissapear.
The Beauty Case option has the same id's (input_81_7 and label_input_81_7).

What am i doing wrong?
My form: https://form.jotformeu.com/60573168018355

Your code looks to be correct.  Check your field ID's to ensure the appropriate ID's are being used.  To see the fully setup of my colleagues example, you can clone the form to your own account:

http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

https://form.jotform.com/60906231461954

The ID's i used seem to be right..

The dummy text form that needs to be hidden is hidden by the code:

form>.form-all #id_147 {display:none;

So that ID is correct.


I have placed an image for the Beauty Case ID's:
cannot seem to find the error.. have been trying for a while now.
Cloning the form and checking his code does not help me, since i am using the same code.

Please do not worry, this is a simple thing to fix. :)

Your CSS is correct, and almost everything is done correctly. The only thing I forgot to mention earlier, is that the hidden field that we are using in our CSS (field #id_147 in your case) must also be withing the same page and form collapse where we will be hiding the option.

So field #id_147 must:

1. Be on the same page as your targeted field #id_81, which is page 3. This is already done.

2. Be inside the same Form Collapse tool as the field #id_81, if you are using any Form Collapse tools. This is not done, which is why it was failing.

3. Must be above the targeted field. This is already done.

The reason for this again lies in how CSS works - CSS can only target either descendant elements (children, those that are inside the initial element), or sibling elements (those that are at the same level as the initial element).

So when field #id_147 is on page 1, it can only affect things on page 1, and only those that are underneath it on that page.

Please simply move it on page 3 to be within the same Form Collapse tool that is holding the Bagage field, but above the Bagage field, and it should be working fine:

Please let us know how it goes.

Thank you for the explanation of CSS with children and sibling elements.

I have moved the text field under the form collapse and above the bagage field.

However, beauty case is still showing.

Could u please clone my form and check the fault?

 

Thanks in advance

I have checked your form, and it is correctly set up. Regarding to why it wasn't functioning correctly for you after the changes, it appears that the older version of your form got stuck in our cache, so I have cleared your form caches:

https://www.jotform.com/help/229-how-to-clear-your-form-cache

After this, your form is correctly hiding the "Beauty Case" option when Male is selected. Here is a brief animation of your form in action:

If you need any further assistance, please let us know. We are here to help.

The beauty case option is succesfully hiding now.

We are glad to hear that the initial query was resolved, and are happy to hear your kind compliments! :)

When it comes to the problem of changes to your form not being saved, in order to avoid confusion and so we can elevate it to our developers if necessary, it has been moved to a thread of its own:

https://www.jotform.com/answers/808056

We will be assisting you with it there, shortly. Thank you.

Hi Boris.

Alright... same thread, new challenge :)

I have cloned above code to hide multiple other fields.
For example in the "Kleding & Accessoires" Form collapse, i have done:

When gender = equal to Man, Hide > ID_148 (which is Field for hiding Onderkleding > Badpak, Bikini, Legging, Onesie, Rok(ken)).

This is working properly.



However, in this field "Onderkleding is also a "Male item", knowing option 'Zwembroek'.
I would like to have the following code as well:

When Gender = Equal to Female, Hide "Field for hiding Onderkleding > Zwembroek
ID_152".

This code should hide option 'Zwembroek'... But this is not working.

Perhaps it has to do with the same CSS basic with descendant  elements.

Is this possible to achieve?

Hiding specific options is definitely the long way to go about doing things.  The easiest way would be to set up an extra field identical to the to the one you wish to hide an option for.  One field would have the options for male and one showing the options for female.  Then, depending on which selection is made, show the appropriate field.

When Gender = to Female, show field that excludes "Field for hiding Onderkleding > Zwembroek
ID_152".

When Gender = to Male, show field that includes "Field for hiding Onderkleding > Zwembroek
ID_152".

This would create a few extra fields in your form but would remove the need for workarounds for each field.

The only problem with doing the above is if your exporting the data to an excel field, you would have a column for each, instead of 1 column. This makes reporting difficult.

You can also use condition logic to combine 2 field data into 1 field. This way once you export the submission data to Excel file data, the 2 combined field data will be in 1 column only.

This user guide should help in understanding the many ways to achieve the combining of data using condition logic.

User guide: https://www.jotform.com/help/410-How-to-Manipulate-Text-String-with-Conditions-and-Calculation

Example:

 

 

 

@ckshowtime Since your request does not seem related to the original, I have moved it to a thread of its own.  I will address your request in the following thread shortly:

https://www.jotform.com/answers/1094837