Using show and hide field conditions in drop down fields

  • capcar2016
    Asked on January 5, 2016 at 7:58 AM

    Hi,

    I wanted to create a dropdown that contain states that another dropdown that contain the cities.

    I was able to do that with Dynamic Dropdown, but the problem is that the information of the two dropdown are saved on only one field... I want a field for the city and another for the state.

    Is there another way for doing that using the normal dropdown and put conditions so that depending on the state I select changes the other dropdown to show only the cities from that state?

    Or there is a way using this widget that the dropdown information is saved in two different rows?

     

     Both on the same column:

     Using show and hide field conditions in drop down fields Image 1 Screenshot 20

     

    Thank you,

    Pedro Crown

     

    Jotform Thread 736301 Screenshot
  • Jan
    Replied on January 5, 2016 at 10:46 AM

    You can use conditions in order to show and hide drop down fields in your form.

    Please check this demo form: https://www.jotform.com/60043772953962
    You can clone it so that you can see how I created the form.

    I created 4 drop down fields. The state and the cities of state 1-3. The cities 1-3 are hidden and will only show depending on the chosen state. I used the Show / Hide Field conditions.

    Using show and hide field conditions in drop down fields Image 1 Screenshot 20

    Hope this helps. Let us know if you have any questions. Thank you.

  • capcar2016
    Replied on January 5, 2016 at 11:15 AM

    I thought of doing that way, but each dropdown would be in a separate row wouldn't?

    Can I put all the different dropdowns in the same row with the name City for example?

    Or I would have to edit the excel file later and put them in the same row manually?

     

    Thanks

    Pedro Crown

  • Ben
    Replied on January 5, 2016 at 12:51 PM

    I presume Pedro that you want to place them in the same row on the form.

    If that is the case, you can simply set the State and the City dropdowns to be smaller - using Shrink option

    Using show and hide field conditions in drop down fields Image 1 Screenshot 20

    I just made a clone of my colleague Jan's form and applied the same. You can see how it would look here: https://form.jotform.com/60044870065956

    Do let us know if that is what you mean or if you meant something else.

  • capcar2016
    Replied on January 5, 2016 at 1:46 PM

    It's not that...

    I want to all 27 states to be in the same row in excel and on jotform.

    Like this:

    Using show and hide field conditions in drop down fields Image 1 Screenshot 30

     

    And not like this if I use the hide option and create 27 dropdown. (This example is with 3 dropdown menu).

    Using show and hide field conditions in drop down fields Image 2 Screenshot 41

    This way above will create 27 fields or rows that I don't want instead of 1 (I only want Município with all data)

     

    Thanks,

    Pedro Crown

  • Kevin Support Team Lead
    Replied on January 5, 2016 at 3:44 PM

    Hi,

    Unfortunately,the only way to do it would be using the Dynamic Dropdown Widget, a feature that you said is not working as you need, another way to achieve it would be making a custom Javascript Code, you will need to get the Full Source code and then add dynamically the options or remove them based on the state selection.

    Do let us know if you have more questions, we will be glad to assist you.

    Regards.

  • capcar2016
    Replied on January 6, 2016 at 8:33 AM

    I tested using the conditions to copy the value from one field "Muncípio" to another named "Cidade" using the conditions, but It only works for one field the other fields return 0.

    So I can at least put all the fields only in one and then I can delete the 27 fields with the name Municipio on the excel file later.

    I did something like this:

    If Estado = AC

    Cidade = Municipio9

    That worked

    Then I did:

    If Estado = AL

    Cidade = Municipio27

    And it returns 0

    What's the problem I can have only one condition in a field?

     

    Thanks,

    Pedro

  • Charlie
    Replied on January 6, 2016 at 10:50 AM

    I'm not quite sure if I understand your concern correctly.

    Is this how your form works:

    1. User can select a state on "Estado".

    2. Each state has cities on it which are the "Municipio"

    3. You want to have the "Estado" and "Municipio" on one column. Is that correct?

    Are you getting 1 state and 1 city only?

    Because the 27 "Municipio" dropdowns are set to required. And when you changed the selection on "Estado" it will hide the previously opened "Municipio" BUT will still retain it's values.

     

    I'm cloned your form and currently setting it up on how I understand your workflow. I'll get back to you as soon as I have finished it.

  • Charlie
    Replied on January 6, 2016 at 10:59 AM

    Here's the cloned form with the edits I made: https://www.jotform.com/60054439745963. You can clone it and see if it works as you have expected. You can clone it by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    We'll wait for your response.

  • capcar2016
    Replied on January 6, 2016 at 11:07 AM

    Very nice. There is a way to view the field without sending the form. Didn't know that.

    And I'ts almost like what you did. Only thing different is that I want only the city in that "Cidade" field, not the "Estado" and "Cidade". But I saw your code and changed it worked now.

    I tryed to do my code but it didn't work the same way... The field "Cidade" when I edit come with all values like:

    Clique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editarClique para editar

     

    I think it has something to do that I'm using a version of the program in portuguese and you are using in english. Tryed to change the "Clique para editar" to Click to edit and it solved some of the problems like that long text I pasted. But there is another bug, that when I pick a diferent state and a new city the old city stays in the field... Is there a way to fix this on mine? Or I can only fix using the cloned version that you sent?

    I'm trying to overcome the limitation that way doing all those 27 fields but what I need is one field only. Instead of Municipio I placed as Cidade just go be easier later to edit the excel file without need much work.

    Another thing. Can I get that selection in one field "Cidade" and delete the other 27 dropdowns of "Municipio"?

     

    About your question. Yes I need only one state and one city. Is there a way to set required only on the one you are editing?

    Many Thanks,

    Pedro

  • Charlie
    Replied on January 6, 2016 at 12:43 PM

    It is possible to have all the 27 "Municipio" in one dropdown, but please note that it will confuse your users. You cannot have one drop down for all the 27 "Municipio" and have them conditionally shown or display per content. This is because they act as one field if you set it up like that.

    You can group them however by using this widget: http://widgets.jotform.com/widget/grouped_values_dropdown 

     

    You can clone my form and have it in your account if you want to use it. For the changes I made, here they are:

    1. When you "Municipio" shows up then you select a city then it hides again, the selected item will remain. To fix this, visit your "Preferences", set "Clear Hidden Field Values" to "Clear On Being Hidden".

    Using show and hide field conditions in drop down fields Image 1 Screenshot 40

    2. It shows "Clique para editar" because you have manually type it in the "Calculation Value", make sure to leave it blank, if it shows "Click to edit" after leaving it blank just ignore it as it is system generated. Here's a screencast:

    When I click on the "Calculation Value" it is blank, when I close it it shows "Click to edit". Do not input any value on it. I tried it on the Portuguese version of JotForm form builder but had the same positive result.

    Using show and hide field conditions in drop down fields Image 2 Screenshot 51

     

    3. If you do not want to have the state in the "Cidade", just open the condition and remove the "Estado" there.

    Using show and hide field conditions in drop down fields Image 3 Screenshot 62

     

     

    For the spreadsheet, unfortunately, the only way I can see on how you can fix it is just hide the columns of the "Municipio". You can follow this article from Google support: https://support.google.com/docs/answer/58142?hl=en 

    I hope that helps.

  • capcar2016
    Replied on January 6, 2016 at 12:58 PM

    Thank you very much Charlie!

    Everything working!

    Just one more thing. I've hidden the "Municipio" fields in the jotform but if I reload the page they show up again. Is there a way to let them always be hidden?

    About the spreadcheat I guess each time I download I can delete the fields with Município and leave only the Cidade that I will have what I want. Easy enough.

     

    Many thanks for all the help,

    Pedro Crown

  • Ben
    Replied on January 6, 2016 at 2:12 PM

    I have moved your question about permanently hidden fields to a new thread Pedro. It can be found here: http://www.jotform.com/answers/737921 where we will be replying back shortly.

    In regards to the downloads of Excel file, there are 2 options that I can think of that should help to make the setup once and then just download the Excel file with the same removed.

    I have moved that to the other thread here where we will follow up shortly: http://www.jotform.com/answers/737926