top of page
Hello Query Parameters

Hello Query Parameters

Get started with URL query parameters.

Intermediate.png

Beginner

2K

Published:

February 26, 2023

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we demonstrate how to add, update, remove, and get URL query parameters.


Note: it's easiest to test this example in a published version of your site. If you test using preview, you will see a lot of extra query parameters from the Editor URL.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements


On the HOME page, we added 3 containers, each containing elements for one of the 3 query parameter actions.


In the first container, we added 2 text inputs: one for the query parameter key and the other for the value. We also added a button to trigger the adding or updating of query parameters. If the key doesn't already exist, a new query parameter will be added. If the key already exists, the existing query parameter's value will be updated.


In the second container, we added a text input for the key of the query parameter to remove. We also added a button to trigger the removal of the query parameter.


In the third container, we added a text box to display the current query parameters in the URL.


Page Code


On the HOME page, we added code to implement 3 query parameter actions in 3 button event handlers.


In the first event handler, we read the values from the text inputs and format them as the key and value of a property in an object. Then we call the `add()` function to add the query parameter to the URL. Note that if a query parameter with the specified key already exists in the URL, the `add()` function performs an update on the existing parameter.


In the second event handler, we read the key value from the text input. Since the `remove()` function expects an array of keys, which allows it to remove multiple query parameters at once, we wrap our key value in an array. Then we call the `remove()` function to remove the query parameter with the specified key from the URL.


In the third event handler, we read the query information from the URL using the `query` property. This gives us an object where each key:value pair represents a query parameter from the URL. We then display that object in the text box.

APIs We Used

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2
bottom of page