What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by gijs_ros on March 30, 2016 at 03:30 PM
    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

    javascript logic CSS
  • Profile Image
    JotForm Support

    Answered by Boris on March 30, 2016 at 06:13 PM

    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.

  • Profile Image

    Answered by gijs_ros on March 31, 2016 at 11:59 AM

    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

  • Profile Image
    JotForm Support

    Answered by david on March 31, 2016 at 04:32 PM

    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

  • Profile Image

    Answered by gijs_ros on March 31, 2016 at 05:10 PM

    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.

  • Profile Image
    JotForm Support

    Answered by Boris on March 31, 2016 at 05:17 PM

    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.

  • Profile Image

    Answered by gijs_ros on March 31, 2016 at 05:24 PM

    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

  • Profile Image
    JotForm Support

    Answered by Boris on March 31, 2016 at 06:38 PM

    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.

  • Profile Image

    Answered by gijs_ros on April 01, 2016 at 03:37 AM

    The beauty case option is succesfully hiding now.

    However, any adjustment i make to my form is not being saved by the form...

    Can you help me with this?

    I already used cmd.exe > ipconfig /flushdns

  • Profile Image
    JotForm Support

    Answered by Boris on April 01, 2016 at 07:56 AM

    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.

  • Profile Image

    Answered by gijs_ros on April 01, 2016 at 10:30 AM

    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?

  • Profile Image
    JotForm Support

    Answered by david on April 01, 2016 at 11:46 AM

    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.