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.
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. }) }