POSTing value from a table using hidden tag

[x230]

Let's say I have one database table with record ID (recID) and title and another with recID and other information related to that recID.
For the first level search, I get all the records from the first table. After that, if I want to search further, I click on of the html table rows, and query the second table  based on the recID that I send from the 1st search result.

Here is a GET way of doing that:

<td> 
<a href='showDetails.php?key=<?php echo $row['recID']?>'><?php echo $row['title']?></a> 
</td> 

Since the recID has been passed, the showDetails.php can get that key value and create a query.

That was easy.

But now I need to use POST, still retain the <a href...> structure.

Using JavaScript only, I want to POST the key (recID) to the destination php file.

I do not want to use <input name="submit" type="submit" />,

 

I found several posts in Google suggesting I use a form with hidden value, and use JavaScript to submit. 

I have created a sample, but whichever row on the html table I click, I get the same recID (I always get the 1st recID) on my POST value. In my database table, each row has unique recID, and when I click different rows, I want to see a corresponding, different recIDs passed on to the  showDetails.php. 

Here is a part of my code: 

<td> 

<form method="post" name="form1" action="showDetails.php"> 

<input type="hidden" name="recNo" value=<?php echo $row["recNo"]; ?> /> 

<a href="javascript: void(0)" onclick="document.forms[0].submit(); return false;">  <?php echo $row["title"]; ?> </a> 
</form> 

</td>

The form submits fine, and when I check 
print_r($_POST); 
in showDetails.php file, I only get the recID belonging to the first record, whichever row I click. 

Please note that the rows are inside an html table. 

<table> 

<?php 
while ($row = $stmh->fetch(PDO::FETCH_ASSOC)) { ?> 

<tr> 
<td> 
... my sample code goes here.... 
</td> 
</tr> 
<?php 
}?> 
</table> 

I am sure that the value of $row["recNo"]  is 1, 2, 3, 4,.... for each subsequent iteration, I put a print statement and verified.

Also, when I check source code of the first search page's html, I can see that  generated page has correct recIDs. That is, I can see:
<input type="hidden" name="recNo" value=1 />
<input type="hidden" name="recNo" value=2 />
<input type="hidden" name="recNo" value=3 />
,....
as the loop iterates (until the last record)

And yet, when I click the rows, I always receive 1.

Could anyone please give me some pointers?

Thank you.

[Barand]

You always submit document.forms[0], which is the first form on the page.

[requinix]

Don't use a link to submit a form. Use a button. An actual button. You can make it look like a link if you want, but it should actually be a button.

[x230]

Thank you Barand and requinix.

Barand: I have submitted using "document.forms[0]"- it is in my post above.
But the submission itself is not the problem , the form is  submitted  alright- (after I click the <td> cell , that is, the item I called 'title' above, the page changes to the destination php. ("showDetails.php") 

requinix: >Don't use a link to submit a form. 
I need to "show" the users that there is a hyperlink so that they might want to click a row (to be exactly correct, click on one of the rows's 'title') to see further details.

>Use a button. An actual button.
The first level search page has hundreds of rows, showing buttons for each rows does not look nice. 

>You can make it look like a link if you want, but it should actually be a button.
This is my last hope.  As long as I see a hyperlink  when I mouseover the rows, I am happy.

***
I seem to have used recID and recNo, but basically, I just want to click on a single row and POST a key to the destination php file. Of course, I can click on any row, but the POST value is just one key, corresponding to that row, 
Each row has a unique key, which is also a primary key for a database table. I want to use that primary key to retrieve some other data from another table.

[Barand]

Something like this, perhaps

<?php
    if ($_SERVER['REQUEST_METHOD']=='POST') {
        echo "<hr>Posted ID:  {$_POST['id']}<hr>";
    }
    
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title>sample button link</title>
<style type='text/css'> 
    button.pseudolink {
        border: none;
        color: blue;
        text-decoration: underline;
        background-color: #FFF;
    }
    button.pseudolink:hover {
        background-color: #CCC;
    }
</style>
</head>
<body>
<form method='post'>
    <input type='hidden' name='id' value='1'>
    <button class='pseudolink'>Record 1</button>
</form>
<form method='post'>
    <input type='hidden' name='id' value='2'>
    <button class='pseudolink'>Record 2</button>
</form>
<form method='post'>
    <input type='hidden' name='id' value='3'>
    <button class='pseudolink'>Record 3</button>
</form>
</body>
</html> 

 

[x230]

Yes, Barand , this is what I was looking for！
I put the <form>...</form> portion inside <td>...</td> and it works beautifully!!
(I added cursor: pointer;  for style.)

Thank you so much.