Filling form input with Javascript and passed data

Question

This is driving me wild, and I have hunted for solutions all over with no luck...

I have a form signup page which uses an Aweber signup form - it collects full name and email address.

This form is submitted and redirects to a second page (a confirmation page) and passes the values on the end of the URL:

?email=dummyemail%40gmail.com&from=dummyemail%40gmail.com&listname=awlist4009916&meta_adtracking=stillhead&meta_message=1&meta_required=name%2Cemail&meta_split_id=&meta_tooltip=&meta_web_form_id=1277063733&name=Example%20Name

Now, Aweber provides a chunk of Javascript to place on the confirmation page which seems to grab the form data and make it available for use on the page.

<script type="text/javascript">
 var formData = function() {  var query_string = (location.search) ? ((location.search.indexOf('#') != -1) ? location.search.substring(1, location.search.indexOf('#')) : location.search.substring(1)) : '';  
var elements = [];  
if(query_string) {     
    var pairs = query_string.split("&");     
    for(i in pairs) {     
        if (typeof pairs[i] == 'string') {           
            var tmp = pairs[i].split("=");           
            var queryKey = unescape(tmp[0]);           
            queryKey = (queryKey.charAt(0) == 'c') ? queryKey.replace(/\s/g, "_") : queryKey;   
            elements[queryKey] = unescape(tmp[1]);      
             }    
       } 
 }  
return {     
    display: function(key) {         
        if(elements[key]) {           
             document.write(elements[key]);         
         } 
         else {         
               document.write("<!--If desired, replace everything between these quotes with a default in case there is no data in the query string.-->");          
          }     
  }   
} 
}
(); </script>

They then say, to call the email address use this:

<script type="text/javascript">formData.display("email")</script>

Which works. I have got this far.

What I want to do now, is instead of display the email address, I'd like to populate a form field with this data.

The form field sits in a form generated by a wordpress plugin (hence why I can't just jump in there) and this is the chunk of output:

<li class="swpm-item swpm-item-email  " id="item-swpm-5">
    <label for="swpm-5" class="swpm-desc">Email  <span class="swpm-required-asterisk">*</span></label>
    <span class="swpm-span">
        <input type="email" name="swpm-5" id="swpm-5" value="" class="swpm-text  swpm-medium  required  email "><p>Email</p>
    </span>
</li>

I have tried various methods with jQuery but can't seem to get tot he bottom of it, and it's driving me nuts.

I assumed something as simple as:

$( document ).ready(function() {
    $('#swpm-5').val(formData.display("email"));
});

But that failed.

Then I tried

$( document ).ready(function() {
    var emailaddr = formData.display("email");
    $( "#swpm-5" ).val( emailaddr );
});

But still no luck.

Can anybody give me some help with this? I feel like I must have missed something crucial.

Answer 1

Try with this:

function getQueryStringAsObject(uri) {
    var uri = uri || location.href;
    var qsAsObject = {};
    uri.replace(
        /([^?=&]+)(?:=([^&]*))?/g,
        function($0, $1, $2) { qsAsObject[$1] = decodeURIComponent($2); }
    );
    return qsAsObject;
}

// You can replace next line by
// $( document ).ready(function() {
jQuery(function($) { 
    var qsAsObject = getQueryStringAsObject();
    $('#swpm-5').val(qsAsObject.email);
});

And forget about the "chunk of Javascript [provided] by Aweber" ;-)