Pass a url return from JS function into href

Question

I'm still new to JS and HTML5

So I have a URL that I store in a var

var Base_URL = "https://www.mywebsite.com/info?username";

Which is linked to a Database that has access to a username value that can contain spaces.

I parse this url into a function

function removeSpaceURL(url) {
var update = url.split(' ').join('%20');
return update;
}

It is not the best way I know but it works good enough for its purpose.

Where I'm stuck is that I want to return the update into a href reference so I can click it.

    <p><a href="" onclick="removeSpaceURL(BASE_URL);return false;" >Survey</a></p> 
<script>
   var Base_URL = "https://www.mywebsite.com/info?username";

function removeSpaceURL(url) {
    var update = url.split(' ').join('%20');
    return update;}

</script>

When I try it on JSfiddle, I get the following error:

{"error": "Please use POST request"}

The correct thing is to have Base_URL be a correctly-formed URL in the first place, which it isn't if there's a space in the username part of it. — T.J. Crowder
– T.J. Crowder, Commented Feb 2, 2017 at 12:56
Why wait until the click to fix it? Why make clicking the link fix the URL and then not follow the link? — T.J. Crowder
– T.J. Crowder, Commented Feb 2, 2017 at 12:57
The values of username from the databse might contain a space (ex. John Smith). Unfortunately i do not have access to the code in order to restrict that option. therefor the need for me to extract the info and parse it so that when i get the url it is not cut of at every space — glaziko
– glaziko, Commented Feb 2, 2017 at 12:59
Well, whoever does have access to the code creating Base_URL, that's where this should be fixed. — T.J. Crowder
– T.J. Crowder, Commented Feb 2, 2017 at 12:59
I totally agree and despite trying to get in touch with them, i have to come up with this solution to by pass it — glaziko
– glaziko, Commented Feb 2, 2017 at 13:05

Community · Accepted Answer · 2017-05-23 11:45:30Z

3

The correct thing is to have Base_URL be a correctly-formed URL in the first place, which it isn't if there's a space in the username part of it.

But assuming you're stuck with it, it's quite simple to set an attribute on an element:

<p><a id="target-link" href="">Survey</a></p> 
<script>
   var Base_URL = "https://www.mywebsite.com/info?username";
   document.getElementById("target-link").setAttribute(
        "href", encodeURI(Base_URL)
   );
</script>

Note using encodeURI as suggested by emiliopedrollo rather than a simplistic replacement of just spaces. But that said, if parts of the URI have already been encoded correctly and only the username is the problem, encodeURI might double-encode things. So if you just want to replace spaces:

document.getElementById("target-link").setAttribute(
    "href", Base_URL.replace(/ /g, "%20");
);

Also note that return false from an onclick on a a element will prevent the link from being followed, so I've left off the onclick entirely.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Feb 2, 2017 at 12:59

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

glaziko Over a year ago

That worked like a charm. Thank you ! From what i m guessing from your answer, the setAttribute(parameter) enables me to set the target of my script to an attribute inside of a tag?

T.J. Crowder Over a year ago

@emiliopedrollo: Yeah, very good point, though with a malformed URI (partially encoded correctly, partially not) it could introduce other problems...

Collectives™ on Stack Overflow

Pass a url return from JS function into href

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related