Trying to make a each row in a table that is embedded in a form clickable to make a project work as designed (no submit button)

Question

I have fixed the problem of the table working within a form. I just added an extra <td> field and created a hidden input field within it that will POST a separate tipID for each tip in the table. The entire table is also wrapped with the form tag to get the tipID to POST to the next page.

Now I need to know how make each individual table row send the data from the form kind of like each one being a button or making a hidden button click onclick of one of these table rows.

<form method="post" action="tips.php">
<div id="tippanel"> 
     <table id="tippabl">
         <tbody>
           <?php if(!empty($tips))
             while ($recd = mysql_fetch_array($tips, MYSQL_ASSOC)) {            
             echo "<tr> <td class='tiptxt' >"; echo $recd['tip_desc']; echo "</td> <td class='tiptime'>";
             echo "<span>".date('H:i', strtotime($recd['datetime']))."</span>"; echo "</br>"; 
             echo date('m-d-y', strtotime($recd['datetime'])); echo"</td><td><input type="; 
             echo '"hidden" '; echo 'name='; echo '"tip_id" '; echo 'value="'; 
             echo ($recd['tip_id']); echo'"></td></tr>';
                }   
           ?>                                   
         </tbody>
      </table>          
     </div>
</form>

My next page will use the query below and echo the full tip_desc since a tip can be several hundred characters. It will also have a text area in which an admin can send a message back to the original user. My PHP and query should look like this on the next page:

<?php
$tipID = $_POST['tipID'];
mysql_query="SELECT * FROM tips WHERE tipID = $tipID";
?>

Please ask more specific question. Its difficult to understand what you want to ask.. — Sachin Jain, Apr 22 '13 at 16:44

score 0 · Answer 1 · edited May 23 '17 at 12:28

Just surround your table into a form, place a hidden input field into it.

<form action="tips.php">
    <input name="tipID" type="hidden" value="id" />
    <div id="tippanel"> 
        <table id="tippabl">
            <tbody>
                <?php 
                    if(!empty($tips)) {
                        while ($recd = mysql_fetch_array($tips, MYSQL_ASSOC)) {             
                            echo "<tr> <td class='tiptxt' >"; echo $recd['tipDescription'];         
                            echo "</td> <td class='tiptime'>";
                            echo "<span>".date('H:i', strtotime($recd['dateTime']))."</span>"; 
                            echo "</br>"; echo date('m-d-y', strtotime($recd['dateTime']));
                            echo"</td></tr>";
                        }
                    }
                ?>                                  
            </tbody>
        </table>
    </div>
</form>

Have a look at this to make your rows clickable. Working demo

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                    var cell = row.getElementsByTagName("td")[0];
                    var id = cell.innerHTML;
                    alert("id:" + id);
                };
            };
        currentRow.onclick = createClickHandler(currentRow);
    }
}

Credit: SolutionYogi

Ref: Adding an onclick event to a table row

I see kind of what it is doing in the demo, but I am very new to JavaScript and I do not understand it fully. I need to be able to alter what it is doing in order to make each table row act like a button that would send the form to the next page so that I can retrieve the post. I updated the code above so you can see the new problem I am having. — wwomble, Apr 22 '13 at 22:04

Trying to make a each row in a table that is embedded in a form clickable to make a project work as designed (no submit button)

1 Answers1