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

    Custom script to disable radio buttons depending on a selected one

    Asked by Senaid on March 02, 2016 at 09:11 AM

    Hey guys! Is it possible to extend that little script with a condition?

    For example:

    If I check Option 1 then Option 2 is disabled.

     

    I'm not really into scripting, so I would be really grateful for your support!

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Charlie on March 02, 2016 at 09:20 AM

    I see you have two forms in your account, could you please provide us more information and details on how that specific field will be disabled? We can help you on customize a script BUT you'll need to embed your form's full source code and inject the custom script there.

    We'll wait for your response.

  • Profile Image

    Answered by Senaid on March 02, 2016 at 09:41 AM

    Hey Charlie!

    I deleted one of the forms in my account, by now there should be only one. The one I'm needing help with is called "Kirchendruckerei: Form Calculator".

    Let's take the radiobutton-field called "Seitenanzahl innen" as example:

    I'd like to disable various options when one of the options is set.

    Something like this:

    User checks Option called "8"

        > Options "12","16" and "20" get disabled

    If the user changes the selected option I'd like to turn the disabled options back to enabled state.

    Is this enough information? I hope I could explain it in a proper way :D

     

    When the form becomes fully functional I'd like to embed it within Adobe Muse.

     

    Thank you for the quick response and sorry for my bad english.

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 02, 2016 at 11:28 AM

    I believe this is possible ONLY if we'll use a custom script and inject it in your form's full source code. I'll try to look for an alternative and I'll get back to you soon as I have a working solution. Thank you for the additional details and information :)

  • Profile Image
    JotForm Support

    Answered by Charlie on March 03, 2016 at 03:28 AM

    Hi,

    So here's the sample custom script that you would like to have. Here's my test website page using a cloned version of your form: https://shots.jotform.com/charlie/custom_script_thread785571/custom_script_disable_options.html 

    Noticed that if you select radio button "8", it will disable radio button "12". If you select radio button "16", it will disable radio button "20". I have only setup 2 conditions.

    To do this, here's what I did:

    1. First, get your form's full source code and paste it on your favorite text editor.

    2. Now copy this custom script that I have: http://pastebin.com/n9KDzHU5 

    function disable_Options(c) {

    // Get the list of radio options with class name form-radio

    var radio = document.getElementsByClassName("form-radio");

     

    // Check each class name radio button

        for(var i = 0; i < radio.length; i++) {

     

          //Set what specific conditions if an option is selected and list the ones that will be disabled.

          // radio[0] is selected then disable radio[1]

            if(radio[0].checked) {

              radio[1].disabled = true;

              radio[1].parentNode.style.opacity = "0.7";

            } 

          // if radio [2] is selected then disable radio[3]

            else if(radio[2].checked) {

              radio[3].disabled = true;

              radio[3].parentNode.style.opacity = "0.7";

            }

            else {        

             radio[i].disabled = false;

             radio[i].parentNode.style.opacity = "1";

           }

        }

    }

    You can create conditions on that custom script, noticed that I have 3 conditions on it.

    Condition 1: IF radio[0] is checked, it means if the first radio it checked then disable radio[1], radio[1] is the second radio button. The index of radio buttons starts from 0 and not 1.

    Condition 2: IF radio[2] is checked, it means if the 3rd radio it checked then disable radio[3], radio[3] is the 4th radio button.

    Condition 3: If a radio button is not checked, then enable it and set the style of it to active state by increasing opacity to "1".

     

    3. Now paste the custom script that you have at the end of your full source code, just before the </body> tag. Make sure to wrap your own custom script with <script></script> tags.

     

    4. When to trigger this script? We want to trigger it when a radio button is selected. We will need to add this code to your input fields:

    onchange="disabe_Options(this);"

    Here's a screenshot showing mine, make sure to add that to all of your input radio buttons on that radio group.

    5. Save the changes and upload your full source code with a custom script on it on your web server.

    You now have a custom script that disables some radio buttons depending on a selected one. Let us know if  you need more help on this.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 03, 2016 at 03:33 AM

    I noticed that there's a problem on my script, I have already updated it, you can get the updated one on the same pastebin link. Just in case you missed it. Here's the link: http://pastebin.com/n9KDzHU5 

    Let us know if you have further questions.

  • Profile Image

    Answered by Senaid on March 03, 2016 at 08:25 AM

    Hey Charlie!

    Thank you very much! This script is exactly what I was looking for :)

    It's working fine and customizing turns out to be pretty easy.

    If I encounter any issues I'll text you back.

     

    Thanks again and great job!

  • Profile Image
    JotForm Support

    Answered by Charlie on March 03, 2016 at 09:39 AM

    Great to hear that it worked :) Should you need more assistance on this, please do feel free to let us know.

    Thank you.