How to change a drop-down field into a checkbox field after a link is clicked

  • Profile Image
    Asked on December 23, 2017 at 08:04 PM

    Hi Jotform

    I saw something very cool on a form that was not built with Jotform. Is there a way to do the same thing with jotform?

    Please see!/donation/checkout

    Click the box that asks, “Would you like your employer to match?”

    When you do, boxes appear for Employer Name and Employer Email.

    Yeah, I know how to do that much in Jotform.

    Here is where it gets cool (and what I do not know how to do).

    Employer Name has a dropdown list

    If I do not find what I want on the list, I can click the little words “Not in list?”

    If I do that, then the box changes from a dropdown to a short text box. Beneath it is a link saying, “Show list.” If I click it, the box changes back to a dropdown list.

    This is great.

    Can it be done in Jotform?


  • Profile Image
    Answered on December 23, 2017 at 08:52 PM

    Thank you for sharing that with us. I have a workaround in mind, but the data would be collected separately. Which means the drop-down field and the textbox field are going to be treated as separate fields.

    Please give me some time. I'll try to create a sample form for you and get back to you as soon as possible.

  • Profile Image
    Answered on December 23, 2017 at 09:43 PM

    Is this what you have in mind? Something like I did here?

  • Profile Image
    Answered on December 23, 2017 at 10:41 PM

    I think what you did is a good workaround but my colleague might come up a good one.

    Here's mine if you like. You can use user-contributed dropdown widget If they can't find the option they want, they can add it to the dropdown field. The added options will be accessible to all the users.

  • Profile Image
    Answered on December 24, 2017 at 01:59 AM

    Here is the sample form that I created based on the form on the website you shared with us.

    I use the Button Checkboxes widget as the link and a condition to show/hide the drop-down field and textbox field in the form based on the widget's state (filled/unfilled).

    I have also applied custom CSS codes both to the form — How-to-Inject-Custom-CSS-Codes and to the widget itself — How-to-Inject-CSS-Codes-to-Widgets

    I would suggest you clone the form to your account so you can inspect it — How-to-Clone-an-Existing-Form-from-a-URL

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    Answered on December 28, 2017 at 10:53 AM

    Very, very cool. You guys are awesome. Thanks!