How to merge a URL param into the content on a static html page?

var url_string = "http://www.example.com/t.html?firstname=john";
var url = new URL(url_string);
var c = url.searchParams.get("firstname");
console.log(c);

Select allOpen in new window

Thanks @leonidas. Can you provide some further details on how this works and exactly what it does?

First you must get the url

var url_string=window.location.href

Select allOpen in new window

Then you create an instance of the URL object
And finally using the https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParamsURL.searchParams property you can access into the GET arguments

@Leonidas Dosas

url.searchParams
https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams#Browser_compatibility

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

for my solution above ID: 42186197 [/quote] fixed html

<p>
Hi <span id=spanName></span>!
</p>

Select allOpen in new window

@Huseyin Forgive me for my lack of coding skills. I took what you provided and added it here: http://www.freedomhacking.com/upgrade/?firstname=JohnTest12&email=johnhopkins%2Btest12%40gmail.com&submit-button=Get+It+Now&ip_addy=174.52.175.42&

I included the URL params from my test. Dreamweaver said to add double quotes around the ID name. Can you see what I'm missing that is causing it not to work as expected?

you are missing jQuery

add this to your pages head section

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Select allOpen in new window

and put js inside jQuery DOM ready function

<script type="text/javascript">

$(function(){
  // js code here
});

</script>

Select allOpen in new window

ok, you already have jQuery...

just put those codes into this

$(function(){
  // js code here, you already have this in your page
});

Select allOpen in new window

I mean just use this in our page

<script type="text/javascript">

function getUrlVars() {
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

$(function(){
  // this code runs when DOM is ready
  var firstname = getUrlVars()["firstname"];
  $("#spanName").html(firstname);
});

</script>

Select allOpen in new window

Ok, I got it working. The guys that coded this page put jquery in at the end. I moved it to the head. That said, the second merge field on the page, which uses the same span code doesn't work while the top merge field does. What would cause that?

change

<span id="spanName"></span>

to

<span id="spanName1"></span>
<span id="spanName2"></span>

and code to

$("#spanName1").html(firstname);
$("#spanName2").html(firstname);

Thanks! That works perfectly.

Check and this via RegEx method:

var findUrlParam = function(url) {
  var urlParams = {};  
  url.replace(    
    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
    function(first, second, third, fourth) {     
      urlParams[second] = fourth;
     
    }
  );
  
  return urlParams;
};

var url="http://www.freedomhacking.com/upgrade/?firstname=JohnTest12&email=johnhopkins%2Btest12%40gmail.com&submit-button=Get+It+Now&ip_addy=174.52.175.42&";

console.log(findUrlParam(url).firstname);

Select allOpen in new window