How to get raw query string data and use it to build iframe source?

Question

I have a scenario with a client where I'm trying to pass query string data from form 1 to form 2, to pre-fill the second form with contact info. Form 2 is iframed on the first form's "thank you" page.

Here's how the URL looks after a person submits the first form and is redirected to the next page...

http://website.com/thanks/?a=First+Last&b=name%40website.com

And here's how the form is initially loaded on that page, within an iframe

<iframe id="form2" src="http://website.com/form2" width="315px" height="340px" frameborder="0" marginheight="30" scrolling="no" sandbox="allow-forms allow-scripts allow-top-navigation"></iframe>

My current attempt at the script for this would get the query string data from the URL WITHOUT decoding it (using an answer from stack overflow), and then would rebuild the iframe's source with the query string data, so form 2 has query string data to pull and can be pre-filled.

<script type="text/javascript">

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

window.onload = function loadSite() {
document.getElementById('form2').src = 'http://website.com/form2' + '?a=' + QueryString.a + '&b=' + QueryString.b;
}

</script>

This should rebuild the iframe code like so...

<iframe id="form2" src="http://website.com/form2/?a=First+Last&b=name%40website.com" width="315px" height="340px" frameborder="0" marginheight="30" scrolling="no" sandbox="allow-forms allow-scripts allow-top-navigation"></iframe>

But for some reason it's not working. The function to rebuild the iframe source isn't running, and I suspect it has something to do with how the script gets the query string data.

Do you see any reasons why? Or is there a better way to approach this?

Thanks for the help! :)

Answer 1

It you just want the querysting, why are you ripping it apart and putting it back together?

Just use

var qs = window.location.search;
var myUrl = "http://www.example.com" + qs;
document.getElementById('form2').src = myUrl;