How to redirect on another page and pass parameter in url from table?

Question

How to redirect on another page and pass parameter in url from table ? I've created in tornato template something like this

<table data-role="table" id="my-table" data-mode="reflow">
    <thead>
        <tr>
            <th>Username</th>
            <th>Nation</th>
            <th>Rank</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for result  in players %}
        <tr>
            <td>{{result['username']}}</td>
            <td>{{result['nation']}}</td>
            <td>{{result['rank']}}</td>
            <td><input type="button" name="theButton" value="Detail"
                       ></td>
        </tr>
    </tbody>
    {% end %}
</table>

and I would like when I press detail to be redirect on /player_detail?username=username and show all detail about that player. I tried with href="javascript:window.location.replace('./player_info');" inside input tag but don't know how to put result['username'] in. How to do this ?

score 58 · Accepted Answer · edited May 23 '17 at 11:47

58

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.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 31 '12 at 11:41

palaѕн

72,112
17
116
136

2

there's a little error: the "(" before function should't be there. – angoru Mar 07 '14 at 15:37
shouldn't the check against the name var be a &&, instead of a ||? – aholt Aug 11 '15 at 22:19
One question, if I want to pass 3 parameters to build in the other url n img I'll have to do the same as your answer? – Skizo-ozᴉʞS ツ Apr 26 '16 at 17:37

score 8 · Answer 2 · answered Dec 31 '12 at 10:52

8

Do this :

<script type="text/javascript">
function showDetails(username)
{
   window.location = '/player_detail?username='+username;
}
</script>

<input type="button" name="theButton" value="Detail" onclick="showDetails('username');">

answered Dec 31 '12 at 10:52

Ravinder Singh

3,113
6
30
46

score 7 · Answer 3 · answered Dec 31 '12 at 10:50

7

Bind the button, this is done with jQuery:

$("#my-table input[type='button']").click(function(){
    var parameter = $(this).val();
    window.location = "http://yoursite.com/page?variable=" + parameter;
});

answered Dec 31 '12 at 10:50

Atticus

6,585
10
35
57

score 6 · Answer 4 · answered Aug 10 '16 at 13:22

Here is a general solution that doesn't rely on JQuery. Simply modify the definition of window.location.

<html>
   <head>
      <script>
         function loadNewDoc(){ 
            var loc = window.location;
            window.location = loc.hostname + loc.port + loc.pathname + loc.search; 
         };
      </script>
   </head>
   <body onLoad="loadNewDoc()">
   </body>  
</html>

score 0 · Answer 5 · answered Apr 11 '22 at 10:36

HTML - set an id attribute

<input type="button" id="go-another-page" name="theButton" value="Detail">Go to another page with parameters</td>

JS - Create an action listener for redirecting

  const anotherPackage = document.getElementById('go-another-page');

   anotherPackage.addEventListener('click', (event) => {
    event.preventDefault();
   // After ? mark set your key and variable eg: payment=order-consulting
   // For multiple parameters you can use & eg: payment=order-consulting&amount=20
    window.location.replace('/payment.html?payment=order-consulting');
  });

Retrieve parameters from another page (In this case, payment.html)

// payment.js - this is javascript of your another page
document.addEventListener('DOMContentLoaded', (event) => {
  const parameters = new URLSearchParams(window.location.search);
  const payment = parameters.get('payment');
  console.log(payment);
  event.preventDefault();
});

How to redirect on another page and pass parameter in url from table?

5 Answers5

Linked