Populate multiple options in the drop down field using URL params?

Hi all,

So I have this requirement where a dropdown should be populated via a URL. Is there a way I can send multiple values to a Form URL and have it add it into the form field using the ID number? 

I tried doing this with Google Form but it does not work.

Thank you.

Shashi Krishna

Just to clarify - I do not need to PRE-SELECT a set of values from the dropdown. I want the values sent in the URL to be added to the dropdown which would have been otherwise empty.

Hope this helps.

Shashi

An example is this form. Its empty for the CLASS field but I want the URL params to be added to it when it is loaded. Is this possible?

The chooseClass1 is the name of the first dropdown box.

https://form.jotform.me/52912810673455?chooseClass1=A,B,C,D

Shashi

I have tried all possible combinations. Nothing works. :(

https://form.jotform.me/52912810673455?chooseClass1[]=[A,B,C,D]

https://form.jotform.me/52912810673455?chooseClass1[]={A,B,C,D}

https://form.jotform.me/52912810673455?chooseClass1[]=[[A,B,C,D]]

...Please help.

Shashi

Hi,

You cannot add options dynamically using prepopulating it in the form URL, you need to edit the form and add it there.

Prepopulating the drop down field means that you are selecting one option via the URL parameter, you can learn more about this here: http://www.jotform.com/help/71-Prepopulating-fields-to-your-JotForm-via-URL-parameters 

Here's an example from your forms: 

This form selects the option "Click to edit":

https://form.jotform.me/52912810673455?chooseClass1=Click%20to%20edit 

This form selects the option "Option 1":

https://form.jotform.me/52912810673455?chooseStudent=Option%203 

If you need to let your users to dynamically add options in the drop down field, you can use this widget: http://widgets.jotform.com/widget/user_contributed_dropdown. Here's a guide on how to add the widget: http://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form 

I hope that helps.

Hi Charlie - Thank you. Sadly I dont need users to add anything dynamically. What I have is a Sheet which has user specific data in it. Depending on their username/email a script in that sheet is supposed to mail them a custom URL which has the Class and Student drop downs in it. So all the users do is select the pre-added value. Not add values dynamically themselves.

Thanks again for trying to help out. 

Shashi

I'm still not quite sure if I understand your goal. If you just want to prepopulate, please see the post I have earlier. Also, you can use this guide as a reference: http://www.jotform.com/help/71-Prepopulating-fields-to-your-JotForm-via-URL-parameters.

Make sure that the name of the field is correct, and the value you want to prepopulate matches the list in your Dropdown field.

Perhaps you would like to select multiple fields? I see you have mentioned it in your earlier post. In that case, please follow these steps:

1. First, in the Drop down field, add the list of options you want to show. After that, enable the "Allow Multiple" option.

2. To select multiple values via URL, you need to add the options in the URL parameter and separate them by commas. Here's an example URL: https://form.jotform.com/52920967755973?chooseClass1=A,B,C.

So basically, you need first to enable "Allow Multiple" option and just separate the options by comma.

Hope that helps.

Hi Charlie,

Let me break this down to you with actual examples of what specifically I want. I know its hard to support it without it.

I am building a Google Form based system where teachers enter student concerns. To do this they need to select the Class and the Student Name. Since there could be errors in entering the Student Name and Class Name I have pre-loaded all this data from another source. So, this Sheet 1 looks as below:

TEACHER EMAIL           CLASS NAME 

abc@email.com             FRENCH A

def@email.com             FRENCH B

abc@email.com             GERMAN A

def@email.com             GERMAN B

abc@email.com             HISTORY

...and so on...

...

Now when a teacher enters their Email Address in the form a script looks up this data, matches up the email address they entered and is supposed to email them a custom link which has a dropdown with only their classes in it. So that they can choose it from a shorter list than a longer one.

So, if abc@email.com submits his/her email address a custom email is sent with link to the form along with (and this is where I am having the problem) URL params that contain 

FRENCH A

GERMAN A

HISTORY

which are populated in that that dropdown component. 

Does that help you in understanding what I am trying to achieve?

Thanks Charlie.

Shashi

Hi Shashi,

Thank you for the detailed answer.

Based from what you would like to achieve, you want to set the drop down field options based from the email that was entered. Is that correct?

As I have mentioned earlier, this is not possible because you need to manually edit the drop down list using our form builder.

From what I see, here's how you would like it:

1. You have a Google Form, teacher fills it out

2. A script will generate a custom link for the JotForm form

3. BUT the JotForm form's dropdown list SHOULD only show the classes based from the email, is that correct?

It seems like what you would like to do is dynamically changed the drop down list using the URL, please note that this is not possible. What prepopulating the form using the URL parameter will just fill out the form, in the drop down field what it does is select the values you declared in the URL parameter. 

However, if you already have preset of the list of classes BASED from the email, then you can use conditional logic instead. Here's an example:

1. First, I will set an email field that is hidden

2. I will then setup preset of Drop down fields based from the email

 3. Now in my conditional logic, this is how it works:

Here's how the condition works:

IF email field IS EQUAL TO ""abc@email.com" THEN SHOW "Drop down field for abc email"

IF email field IS EQUAL TO ""def@email.com" THEN SHOW "Drop down field for def email"

Here's an example:

https://form.jotform.com/52920967755973?email=abc@email.com 

https://form.jotform.com/52920967755973?email=def@email.com 

You'll see that loading the prepopulated form URL will trigger the conditions.

I hope that somehow it helps.

Hi Charlie - Thank you. I see it. But I think this works fine for a small set of data.

But I should have also mentioned that I have 30 odd teachers who need to be able to do this. So does that mean I should make 30 hidden fields for each of their email addresses? 

Thanks again.

Hi Charlie - And yes. Regarding the 3 points you made the answer is YES. That is exactly what I want. But I want to be able to load ALL the data into JotForm for the filters to happen without too much manual entry.

Thanks.

Shashi

Hi Shashi,

Yes, that is correct. That would require you to add more dropdowns for each of the email addresses. I have a workaround in mind. I'll test it out and let you know later.

Thanks

Hi Welvin - Thank you. That would be much appreciated. I look forward to your response.

Shashi

Currently, my colleague is not currently online. But I'll notify him about the progress of the workaround he has in mind.

Thank you.

The workaround will work like this:

a. Add all the "Class Names" in the Dropdown field in your Jotform form.

b. Add a conditional logic to disable the Dropdown once it is filled:

c. Create the URL parameters (prepopulation) using your script in the spreadsheet.

This way, the items will be preselected in the Dropdown field then users won't be able to change it since the field is disabled by the conditional logic.

If your idea is to disallow users from changing the options, this method should work. Only one logic will be use and you will only change the options in the dropdown. Still, Multiple selections should be allowed in the dropdown.

Here's my test form: http://form.jotformpro.com/form/52924614981967?love=Option%201%2COption%202.

Thanks

Hi Welvin - I think I need some more clarity with your solution. Please find the image attached. This is the workflow I am expecting to take place. Questions also included. Thank you so much for trying to help out. I truly appreciate this.

If I understand you correctly. You would like to allow the recipient of the custom link to have a set of drop down fields already trimmed down based on the email address. Is that correct?

Unfortunately, I believe the workaround by my colleague above will not work with the process flow you have, the workaround above will give you a custom link with the drop down fields already preselected, user's won't be able to change the selected items, unless they change it in the URL parameter.

The one I suggested might work but as you have said, you have a lot of teacher's with email address, you can set all of them and set conditions based from the email.

Another possible approach is using the form's full source code and combining the one I suggested. You can create a custom Javascript that will identify the email address and hide the other items in the drop down field.

Here's an example website page that I created: https://shots.jotform.com/charlie/thread684220/full_source_custom_script_dropdown.html?email=abc@email.com. You'll noticed I prepopulated the URL with abc@email.com. You'll also noticed that when I used the prepopulated link the dropdown field only shows option 1 and option 2. I have hidden options 3-8 when the email is abc@email.com.

Here's the custom script that I made:

<script>

  var dropdown = document.getElementById("input_3");

  var option = dropdown.getElementsByTagName("option")

  function runFunction() {

    var email = document.getElementById("input_1").value;

    alert(email);

    //hide the following options when the email is abc@email.com

    if(email == "abc@email.com") {

       option[3].style.display = "none"; // option 3

       option[4].style.display = "none"; // option 4

       option[5].style.display = "none"; // option 5

       option[6].style.display = "none"; // option 6

       option[7].style.display = "none"; // option 7

       option[8].style.display = "none"; // option 8

    }

  }

</script>

Here's a screenshot of it in my page.

Here's a pastebin link, you'll see my form's full source code and the custom script at the bottom part: http://pastebin.com/6qNDwru6 

However, you'll need to embed the source code to a web page and create a custom script for it.

I hope this helps.