Get the dynamic value of anchor tag

Question

NOTE: I had posted the following as answer to one of the question(Get the value of the dynamic anchor tag and pass it to the next page), but there is a glitch. So posting it again. This is not a duplicate of any existing thread

I want to achieve the following using Tornado, html, javascript -

On clicking a link (anchor tag), {which has a dynamically generated value - {{d[0]}} , coming from MySQL database (id).}, I should be able to get the id value (say 100) and send it to the tornado controller and use a logic to pull out all details related to that id.

id -------- Note

100 ----- Note on 100

101 ----- Note on 101

Step 1 -

a href = "TornadoHandlerPath"

would send it as default Get Method, but I wanted it to be sent using Post Method.

So I followed this link - http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

included method post to the form. So my new anchor tag looked like this

  a href="javascript: submitForm()" id="id" name="id">
                                   {{d[0]}}  </a>

Step 2 - I included a hidden field in html above the anchor tag

  <input type="hidden" name="cid" id="cid">

and In the javascript function I got the value of id and assigned it to the hidden field.

So when the form got submitted, the id would be sent along with the post request.

function submitForm() {
var id = $("#id").html();        
var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form"); 
form.submit();

}

And in Tornado Handler I caught it with self.get_argument("cid") and move on with the logic implementation.

There is a glitch in this method. Even if i click on different id say 103, it still displays the details of id 100 only!! This is because I am pulling the data, based on id. And all rows have same id.

I tried using

var id = $(this).closest('td').html(), but it dint work.

The entire code is here -

$('.alink').on('click', function() {

var id = $(this).closest('td').html();

var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form"); 
form.submit();
});

HTML

<td>
<form name="form" id="ft" action="/TornadoHandler" method="Post">
<input type="hidden" name="cid" id="cid">                                         
<a href="javascript: submitForm()" class="alink" id="id" name="id"> {{d[0]}} </a>
</form>
</td>

I am stuck here for long time. Pls Help Me!!

Answer 1

you could use data attributes to move data around.no need for the hidden field, just put it straight on the anchor tag

function submitForm(thelink){  alert(thelink.getAttribute('data-info'));
      
}

<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 1"class="alink" id="configid" name="configid"> 1 </a>
<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 2"class="alink" id="configid" name="configid"> 2 </a>
<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 3"class="alink" id="configid" name="configid"> 3 </a>