Getting the value from first cell in a row to submit using Javascript

Question

Hi.

I create a table using PHP from a database, meaning the size of the table and values vary.

The table creation:

<table>     
            <thead>
                <tr>
                    <th>Ticket</th>
                    <th>Empresa</th>
                    <th>Requerente</th>
                    <th>Motivo</th>
                    <th>Data</th>
                    <th>Hora</th>
                </tr>
            </thead>

        <tbody>
            <form name="goTicket" action="resolver.php" method="POST" >         
<?php   
    $sql = "QUERY";
    $result = mysql_query($sql);
    while ($row = mysql_fetch_array($result)) {
        echo "<tr onmouseover=\"this.style.background='#EFF5FB';this.style.cursor='pointer'\"
        onmouseout=\"this.style.background='white';\" onclick=\"javascript: submitform()\">";
        echo "<td>$row[Ticket]</td>";
        echo "<input type='hidden' name='_ticket' value='$row[Ticket]' />";
        echo "<td>$row[Empresa]</td>";
        echo "<td>$row[Requerente]</td>";
        echo "<td>$row[Motivo]</td>";
        echo "<td>$row[Data]</td>";
        echo "<td>$row[Hora]</td>";
        echo "</tr>";
    }
    echo "</form>";
    echo "<tr><td colspan='6' style='text-align: center;'><form action='adminmenu.php' ><br /><input type='submit' name='woot' value='Main Menu' /></form></td></tr>";  
    echo "<tbody>";
    echo "</table>";
?>

The Javacript function used to submit is this one:

<script type="text/javascript">
        function submitform()
        {
            document.forms["goTicket"].submit();          
        }
</script>

Now whenever I click on a row it takes to the appropriate page "resolver.php" but always sends the most recent data, from last time the while was executed.

I need the value from the first cell, or the hidden input tag, that contains what I need, from the row I click.

Thank you.

Answer 1

Full suggestion

 <script type="text/javascript">
 function submitform(ticket) {
   document.goTicket.elements["_ticket"].value=ticket;
   document.goTicket.submit();
 }
 </script>
 <table>     
        <thead>
            <tr>
                <th>Ticket</th>
                <th>Empresa</th>
                <th>Requerente</th>
                <th>Motivo</th>
                <th>Data</th>
                <th>Hora</th>
            </tr>
        </thead>

    <tbody>
<form name="goTicket" action="resolver.php" method="POST" >
<input type="hidden" name="_ticket" value="" />

<?php   
    $sql = "QUERY";
    $result = mysql_query($sql);
    while ($row = mysql_fetch_array($result)) {
?>    

    <tr onmouseover="this.style.background='#EFF5FB';this.style.cursor='pointer'"
    onmouseout="this.style.background='white';" 
    onclick="submitform('<?php echo $row[Ticket]; ?>')">
    <td><?php echo $row[Ticket];     ?></td>
    <td><?php echo $row[Empresa];    ?></td>
    <td><?php echo $row[Requerente]; ?></td>
    <td><?php echo $row[Motivo];     ?></td>
    <td><?php echo $row[Data];       ?></td>
    <td><?php echo $row[Hora];       ?></td>
    </tr>
<?php } ?>

</form><!-- not really nice -->
   <tr><td colspan="6" style="text-align: center;"><form action="adminmenu.php" >
   <br /><input type="submit" name="woot" value="Main Menu" /></form></td></tr>
    </tbody>
   </table>

Answer 2

If I see good ... Yo set form with many of hidden inputs with same name ... what you want with this... of course it return last value ... you have to changing names in loop and then call exact name of input

Answer 3

Your problem is that you're just submitting the form without any reference to what was clicked. All the hidden inputs have the same name so the form just sends the last one.

Try the following:

echo "<tr onmouseover=\"this.style.background='#EFF5FB';this.style.cursor='pointer'\" onmouseout=\"this.style.background='white';\" onclick=\"javascript: submitform('$row[Ticket]')\">";

// delete this from while:
// echo "<input type='hidden' name='_ticket' value='$row[Ticket]'/>";
// and instead add before </form> with value=""

Then change your javascript to change the value before submitting:

function submitform(val) {
    document.forms["goTicket"].elements["_ticket"].value = val;
    document.forms["goTicket"].submit();          
}

Kudos to mplungjan also got this as I was typing!