Dynamic text based on URL parameters

Question

I'm building a website on Instapage and I have a form on the homepage with two fields: State & Practice Area. When a visitor submits his selections, he is redirected to another page with "area" and "state" as URL parameters.

All good so far, but now I want to write a paragraph on the page, let's just say "[practice area] in [state]", where the brackets would contain the corresponding information from the URL parameters. I'm guessing it would be a simple HTML code that replaces a parameter's name within the paragraph I'm writing with its description from the URL.

I also want to have a default text if there are no parameters in the URL.

Just to be clear, I'm trying to do all of this within the same paragraph, so most of the paragraph stays the same, and just a couple of words within it would change based on the parameters (or have a default value if there are no parameters).

Any help would be appreciated. Thank you!

Can you give an example url?

Armin Ayari
– Armin Ayari

2018-07-26 10:13:12 +00:00
Commented Jul 26, 2018 at 10:13 — Armin Ayari
– Armin Ayari, Commented Jul 26, 2018 at 10:13

Armin Ayari · Accepted Answer · 2018-07-26 18:30:42Z

1

If your URL is like this:

[protocol]://[hostname]/[state]/[practice area]

You can get the state and practice like this:

let state = window.location.pathname.split('/')[1] || 'your default value for state'

let practiceArea = window.location.pathname.split('/')[2] || 'your default value for practice area'

p = document.getElementById('text')

p.innerText = `${state} in ${practiceArea}`

<p id='text'></p>

Update

If your URL is like this:

"[protocol]://[hostname]/?state=statevalue&practiceArea=practiceValue"

You can get the state and practice like this:

var urlParams = new URLSearchParams(window.location.search)

let state = urlParams.get('state') || 'your default value for state'

let practiceArea = urlParams.get('practiceArea') || 'your default value for practice area'

let p = document.getElementById('text')

p.innerText = `${state} in ${practiceArea}`

<p id='text'></p>

edited Jul 26, 2018 at 18:30

answered Jul 26, 2018 at 10:26

Armin Ayari

6293 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ovidiuav Over a year ago

Hi Armin, thank you for your answer! The parameters show as "?area" and "&state" in my URL. How do I grab the information from the URL? Do I need to add some custom HTML to my header beforehand? And then how do I actually implement the dynamic text on the page, within my paragraph? Thank you!

Armin Ayari Over a year ago

@ovidiuav I updated the answer based your URL see if this helps

ovidiuav Over a year ago

Thanks a lot Armin!

Collectives™ on Stack Overflow

Dynamic text based on URL parameters

1 Answer 1

Update

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related