On the Details page, use the URL object to get access to the url params, for example:

const url = new URL(window.location.href);
console.log(url.searchParams.get("id"));

Set the user name as data-username attribute to the button and also a class:

HTML

<input type="button" name="theButton" value="Detail" class="btn" data-username="{{result['username']}}" />

JS

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name != undefined && name != null) {
        window.location = '/player_detail?username=' + name;
    }
});​

EDIT:

Also, you can simply check for undefined && null using:

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name) {
        window.location = '/player_detail?username=' + name;
    }
});​

As, mentioned in this answer

if (name) {            
}

will evaluate to true if value is not:

• null
• undefined
• NaN
• empty string ("")
• 0
• false

The above list represents all possible falsy values in ECMA/Javascript.

To pass both parameters, you may try this

jQuery(document).ready(function($){
    $('.product').click(function(event) {
        event.preventDefault();
        var name = $(this).data('title'), img = $(this).data('img')
        window.location = './lineup/index.html?title=' + name + '&img=' + img;
    });
});

To parse a value by key from url you can use this function (Source : MDN)

function loadPageVar (sVar) {
    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

In your lineup/index.html put this code and the function given above

$(function(){
    $('#title-area').text(loadPageVar('title'));
    $('.product-img').text(loadPageVar('img')); // will set text

    // To set an image with the src
    $('.product-img').append($('<img/>', {
        'src':loadPageVar('img')
    }));
});

Cross-browser event handling is much simpler with a toolkit like JQuery:

HTML:

<button data-param="foo">Foo</button>
<button data-param="bar">Bar</button>

JQuery code:

$('button').click(function(){
    window.location = window.location.href + '?param=' + $(this).data('param');
});

Demo: http://jsfiddle.net/6DK5J/

You can use encodeURIComponent()

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

Example

window.location = "/login?redirect=" + encodeURIComponent("/original_location?p1=vl1&p2=v2")

The following will get the current URL querystring:

var query = window.location.search;

That can then be used in the redirect:

window.location.replace('sample.com' + query);

DOCS

Update

The .replace() method will remove the current URL from the browser history. If you want to retain the current URL use .assign() as mentioned by @igor

You can use javascript to get a list of params pretty easily with the following line.

var paramArray = window.location.search.substring(1).split("&")

This will build an array of the parameters of the query string. From there you just need to add logic to find the param you specified in your question and take the appropriate redirect using

window.location.href = 'some URL'; //causes the browser to refresh with the new URL

Example:

function getQueryStringArray(){
    var assoc=[]; 
    var items = window.location.search.substring(1).split('&'); 
    for(var j = 0; j < items.length; j++) { 
       var a = items[j].split('='); assoc[a[0]] = a[1]; 
    }
    return assoc;
}

//point at which you want to determine redirection
var qs = getQueryStringArray();
var url = '';
if (qs.lang !== 'undefined' && qs.lang) {
   switch (qs.lang) {
      case 'en':
         url = 'blah';
         break;
      case 'de': 
         url = 'meh';
         break;
   }
   window.location.href = url; //reroute
 }