title: Using URL from email merge to populate web form text box using Java Script
body: <p>I'm using MailChimp to merge fields into a URL directing people to complete a form on my site. I want to prepopulate the text boxes with the information from the URL.</p>
  
  <p>ex: <a href="http://www.sitename.com/page?fname=John&amp;lname=Smith&amp;email=jsmith@email.com" rel="nofollow noreferrer">http://www.sitename.com/page?fname=John&amp;lname=Smith&amp;email=jsmith@email.com</a></p>
  
  <p>I'm a novice at this and not sure what I'm doing wrong here. Here's my core code:</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;script&gt;
  $.extend({
    getUrlVars: function(){
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;');
      for(var i = 0; i &lt; hashes.length; i++)
      {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
      }
      return vars;
    },
    getUrlVar: function(name){
      return $.getUrlVars()[name];
    }
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;form id="form_id_name" method="POST" action="/forms/users"&gt;
  
      &lt;label for="fname"&gt;First Name:&lt;/label&gt;
      &lt;input required="" class="text" id="user_first_name" name="user[first_name]" type="text" /&gt;
  
  &lt;script&gt;
  $("#user_first_name").val($.getUrlVar("fname"));
  &lt;/script&gt;  
  
      &lt;label for="lname"&gt;Last Name:&lt;/label&gt;
      &lt;input class="text" id="user_last_name" name="user[last_name]" type="text" /&gt;
  
  &lt;script&gt;
  $("#user_last_name").val($.getUrlVar("lname"));
  &lt;/script&gt;  
  
      &lt;label for="email"&gt;Email Address:&lt;/label&gt;
      &lt;input class="text" id="user_email" name="user[email]" type="email" /&gt;
  
  &lt;script&gt;
  $("#user_email").val($.getUrlVar("email"));
  &lt;/script&gt; 
  
      &lt;input type="submit" name="commit" value="Submit" /&gt;
  
    &lt;/form&gt;
  
  &lt;/body&gt;
  </code></pre>