How to set parameter and its value to HREF dynamic using javascript

Question

I have a link like following

<a id="dynamicLink" href="http://www.w3schools.com?userName=test">Visit W3Schools</a>

I would like to change the value of userName from test to test1.

How to do that using javascript?

could someone help me on this?

May i know the reason why i got down vote ?

Joe
– Joe

2015-07-14 11:41:28 +00:00
Commented Jul 14, 2015 at 11:41 — Joe
– Joe, Commented Jul 14, 2015 at 11:41

Jon Surrell · Accepted Answer · 2015-07-14 21:03:32Z

3

I suggest using a library to work with URIs. It will provide some consistency. Here is an example using URI.js:

// Get our <a> element
var l = document.getElementById('dynamicLink');

// Use URI.js to work with the URI
// http://medialize.github.io/URI.js/
var uri = URI(l.href);

// Get the query string as an object
var qs = uri.query(true);

// Change our value
qs.userName = 'test1'

// Update the URI object
uri.query(qs);

// Set our new HREF on the <a> element
l.href = uri;

<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.15.2/URI.min.js"></script>

<a id="dynamicLink" href="http://www.w3schools.com?userName=test&someOtherKey=val">Visit W3Schools</a>

edited Jul 14, 2015 at 21:03

answered Jul 14, 2015 at 11:59

Jon Surrell

9,6678 gold badges52 silver badges55 bronze badges

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

4 Comments

Joe Over a year ago

Jon Surrell this is replacing the text but removes other parameter also if i pass the comma separated value then it creates multiple parameter for each value. Please suggest as how to proceed further.

Jon Surrell Over a year ago

@Tony I've changed the example to account for this. You can also refer to the URI.js docs

Joe Over a year ago

Thank you Jon and sorry to disturb you again, i sent comma separated value and it takes only the first value and does even set the other values.

Joe Over a year ago

Thank you Jon, i got that, it was array and converted to using toString() and it works fine now.

Ahs N · Accepted Answer · 2015-07-14 11:59:14Z

1

Try this:

document.getElementById("dynamicLink").href.replace("userName", "test1");

This should change the value of userName in href to test1

edited Jul 14, 2015 at 11:59

answered Jul 14, 2015 at 11:26

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

3 Comments

Joe Over a year ago

Ahs N it is not setting the value, please correct me if i am wrong

Ahs N Over a year ago

You are right. I read the question wrong. I just edited the answer to do what you required. Please test it again.

Joe Over a year ago

No and it is not replacing the value still. Please check

Collectives™ on Stack Overflow

How to set parameter and its value to HREF dynamic using javascript

2 Answers 2

4 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Related