Passing URL with query parameters as function parameter in JavaScript

Question

I have a URL that looks like

https://go.feeds4.com/merchants/?pid=1676&mid=4261

How do I pass this as a function parameter. I am trying to pass the value but not able to get anything in the function.

Does the & in query paramter cause issues?

HTML

<a href="javascript:;"
   onclick=rendernewmodal(<?php echo '"'.htmlspecialchars_decode($merchant->affiliate_link).'"'; ?>);>
  <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>

On View Page Source, I can see the following

<a href="javascript:;"
   onclick=rendernewmodal("https://go.feeds4.com/merchants/?pid=1676&mid=4261");>

JS

function rendernewmodal(url) {
  alert (url);
}

I don't see any alert showing value of the URL. Please help.

onclick function is not under " ".

Shubham
– Shubham

2017-01-10 07:29:19 +00:00
Commented Jan 10, 2017 at 7:29 — Shubham
– Shubham, Commented Jan 10, 2017 at 7:29

Quentin · Accepted Answer · 2017-01-10 07:32:20Z

1

You have two problems:

When putting data into an HTML document, you have to encode it for HTML not decode it from HTML
Attribute values need quoting when they contain certain characters (like quotes)

Mashing strings together to make JavaScript literals is error prone and messy, so you should avoid doing that by hand too.

So:

<?php
    # Get the URL
    $url = $merchant->affiliate_link;

    # Put quotes around it and escape special characters for JS
    $url_as_js_string_literal = json_encode($url);

    # Put it in the rest of the JS
    $js_function_call = "rendernewmodal($url_as_js_string_literal);";

    # Escape special characters for HTML
    $html_safe_js = htmlspecialchars($js_function_call);
?>
onclick="<?php echo $html_safe_js; ?>)">

answered Jan 10, 2017 at 7:32

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

Gaurav Mehta Over a year ago

i was doing htmlspecialchars_encode in PHP because the url was displaying & instead of &

Quentin Over a year ago

@GauravMehta — It's supposed to display & in the source code. The browser will decode it it when parsing the HTML.

Gaurav Mehta Over a year ago

You sir are a genius. Thanks for the help.

Collectives™ on Stack Overflow

Passing URL with query parameters as function parameter in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related