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 get the URL via JS very easily.

You have not provided the button click code in the question. So I am assuming there can be two ways to be redirected to another page;

1. You can add a button and write a click function to redirect;

   <button onclick="redirect()"> Go To Page 2 </button>
   <script>
   function redirect()
   {
       var currentUrl = window.location.href;
       var parts = currentUrl.split("/");
       var param = parts[parts.length() -  1];
       window.location.hef = page2_url + "/" + param;
   }
   </script>
   

2. You can also add an anchor tag for redirection;

   <a href="page2_url" id="redirectlink"> Button </a>
   <script>
     (function(){
         var currentUrl = window.location.href;
         var parts = currentUrl.split("/");
         var param = parts[parts.length() -  1];
   
         $("#redirectlink").attr("href", "page2_url" + "/" + param)
    })()
   </script>