How can I make it so a certain drop box selection hides/removes several fields and changes the payment amount?

  • Profile Image
    Asked on March 04, 2012 at 06:58 PM

    For example, if one was to select "Estonia" from the Country drop down selection, I'd like a couple of the (irrelevant) fields to disappear, and a different version of the payment field appear, in which an adjusted price is shown.

  • Profile Image
    Answered on March 04, 2012 at 07:16 PM

    hi Samit,

    if the selection is not too many, you can use the "Option" property in the toolbar property of the dropdown.. similar to this screen.
    I change the option 1,2,3,  to money 1,2,3 instead 


    my sample form is here


    hope this help.


  • Profile Image
    Answered on March 04, 2012 at 08:10 PM

    hi Samit,

    here a more dynamic one. in case this is also what you need.

    how i did it:

    1. add 3 selection dropdown box.
    2. customize the 'selections' by going to 'Option' in property toolbar of the dropdown boxes.
    3. in this case i manually put the selection
       * for Country i use (country 1, 2, 3)
       * for Amount (amount 1,2,3)
       * for Amount2 (amount2 1,2,3)
    4. I then click the Country selection dropdown to hightlight it, then
    5. in Setup & Embed I created a "Condition" (click Condition in tool bar property)

    6. My condition is
       * initialy, the Amount,Amount2 selection are hidden,
       * when I select a Country (country 1)
       * it will display the "Amount" selection dropdown (then i can now click on amount 1,2,3)
       * Amount2 is still hidden
       * when i select Country (country 2)
       * "Amount"  will be hidden, then
       * "Amount2" will now be display, (i can now select from amount2 1,2,3)



    you can check the sample form here 

    i'll be glad to help


  • Profile Image
    Answered on March 05, 2012 at 07:13 AM

    You can't add multiple payment fields in a form, as an alternative solution what you can do is to create a separate payment form that has a different amount corresponding to the countries. To hide or show fields according the country selection you can set the Conditions.

    Here is a working sample of the form:

    What I did was to create two forms, the main form contains the drop down option with the Special Option of Countries and a Payment field with the default amount applicable to the rest of the countries. The second form I made contains the Payment field corresponding to that of Estonia.

    The next step is to embed the second form to the main form to do this:

    Open the second form in Jotform and from the Setup & Embed toolbar, Click Embed Form, then click the Embed icon. 


    Copy the  code provided this would be used as the embed code in the main form.

    Since we now have the code you can now embed it on the main form using Free Text (HTML) which can be found from the Power Tools > Click the Edit HTML button on the right hand side and paste the script code. 

    Click Complete.

    NOTE: When you have these Free Text (HTML) fields populated, i.e clicked on the Complete button. Try not not edit their contents. If you need to make a change, delete the entire field and start over.

    Now it's time to set the conditions, click on 'Setup & Embed' > 'Conditions' > select 'Show / Hide a form field' > Click on 'Next'. By default the payment field in the main form is displayed but when the country Estonia is chosen then we hide this field so this is the first condition set.

    The second condition is to display the Free Text (HTML) when the country Estonia is chosen, the Free Text (HTML) contains the embed code of the payment field of the second form.

    NOTE:  When setting the conditions you have no way of identifying the Free Text (HTML) fields on your form, (because they contain no text at all, just javascript tags). They will be shown as thin grey strips. They will, however, be in the order they have been on your form, so this is how to tell them from each other and why its important to remeber which form embed code you have each!

    Save your main form and test it on the browser. Feel free to clone the main and second form to test out the functionality.

    Hope this helps.