Adding dropdown data to URL parameters on submit button

Ask the community
,
1

I am trying to create a set of dropdown options that once a ‘submit’ button is clicked, the options from the dropdowns are added to the URL attached to the button. The first dropdown data is amended to the URL, but the data from the following dropdowns are not added.

For example, based on the options selected in 3 dropdowns, these parameters would be added to the URL, effectively loading on the next screen.

I want the final URL to be something like: “https://mysite .com/checkout?product=poloshirt12&color=red&size=large&shipping=ground”

I have tried using wixLocation to add parameters to the URL, but it only adds the parameter from # dropdown1. The second and third dropdowns are not added to the URL:

export function button1_click ( event , $w ) {
//Add your code for this event here:
let myValue1 = $w ( “#dropdown1” ). value ;
wixLocation . to ( “/checkout?product=poloshirt12&size=” + myValue1 );
let myValue2 = $w ( “#dropdown2” ). value ;
wixLocation . to ( “&color=” + myValue2 );
let myValue3 = $w ( “#dropdown3” ). value ;
wixLocation . to ( “&shipping=” + myValue3 )
}

I’m sure there’s some simple errors in my code, or a different way to combine multiple wixLocation calls to a single event.

Thanks for the help.

2

If I got you correctly, you don’t want to redirect the user on input selection. So do not use wixLocation.
Do something like:

export function submit_click(event) {
 let url = '/checkout';
 let values = [
  {param: 'size', value: $w('#dropdown1').value},
  {param: 'color', value: $w('#dropdown2').value},
  {param: 'shipping', value: $w('#dropdown3').value}
 ].filter(e => e.value);
 if(values.length){
  values.forEach(e => url += `&${e.param}=${e.value}`);
  url = url.replace('&', '?');
  //now save the url with submission depneds on how you handled your submission process.
 })
}
3

Hi J.D. Thanks for the help.
This doesn’t seem to be working for me. I do want to redirect the user to another page (/checkout) on click of the submit button, but with the parameters from the dropdowns added to the URL.

So on submit, the user goes from “mysite .com” to “mysite .com/checkout?size=medium&color=red&shipping=ground”

I’m not sure what you mean about “save the url with submission.” I don’t need to save this to any database, I really just want the URL parameters added when the user lands on the next page.

For clarity, the values added to the URL parameter are to populate a form on the “/checkout” page.

4

I see what you mean about redirect. I do not want to redirect them on input selection (there are 3 total required selections to make). I do want to redirect them onClick of the submission button.

5

So:

export function submit_click(event) {
 let url = '/checkout';
 let values = [
  {param: 'size', value: $w('#dropdown1').value},
  {param: 'color', value: $w('#dropdown2').value},
  {param: 'shipping', value: $w('#dropdown3').value}
 ].filter(e => e.value);
 if(values.length){
  values.forEach(e => url += `&${e.param}=${e.value}`);
  url = url.replace('&', '?');
 })
  wixLocation.to(url);
 }
}
6

This works! Thank you so much!

7

Hi J.D.
Opening this back up because I’ve changed the redirect link of the submit button to a dynamic page, in order to load more content based on selections on this page.

This however has broken the ability to add parameters to the URL. The redirect page loads and dynamic content filled, however the parameters are not added to the URL.

Do you know if there’s any way to add URL parameters like this when linking to a page (in wix system) with dynamic content?

8

I got this to work just by adding the dynamic database option to the URL on the click event. Simple enough solution!