Question

I have a html table that I am populating with PHP, now it is populated and it has a button called ‘update’, there is also a field per row that has the ‘client_id’, also there are fields that have textboxes.

What I want to do now, is that if the user clicks on ‘Update’, it will post only those values for that row… How can i do this?, when they click ‘Update’ is it going to post all the fields of all the rows?, I just want the row where the update button was clicked.

Code below

print("<table id='results'><tr><th>ID</th><th>Image</th><th>Name</th><th>Price</th><th>Price Label</th><th>Description</th><th>Update</th></tr>");

 while($row2 = mysql_fetch_array( $result2 )){ 
     $client_id = $row2["client_id"];
     $client_name = $row2["client_name"];
     $client_disc = $row2["client_disc"];
     $client_price = $row2["client_price"];
     $client_image = $row2["client_image"];
     $client_price_label = $row2["client_price_label"];

     print("<tr>");   
     print("<td>");
     print("<p style='font-size:14px; color:blue; padding:0;'>$client_id</p>");
     print("</td>");          
     print("<td>");
     print("<img class='custom_rate' alt='' src='$client_image' />");
     print("</td>");
     print("<td width='100px'>");
     print("<input type='text' value='$client_name' name='clientname'/>");
     print("</td>");
     print("<td>");
     print("<input type='text' value='$client_price' name='clientprice'/>");
     print("</td>");
     print("<td width='100px'>");
     print("<input type='text' value='$client_price_label' name='clientpricelabel'/>");
     print("</td>");
     print("<td width='100px'>");
     print("<textarea cols='15' rows='2' name='description'>$client_desc</textarea>");
     print("</td>");
     print("<td width='100px'>");
     print("<input type='submit' value='Update' name='update'/>");
     print("</td>");
     print("</tr>");
}

print("</table>");

Answer 1

You can make each row a form. However, this is going to be invalid HTML. Though, it’ll still work.

I’d create some javascript to pull all of the values of the inputs within the row into a single json object, then send that object to the server via ajax.

jQuery would be my library of choice to do that, unless you have a larger app.

Hope that helps…

Updated: provided sample code to submit json for a row…

<script>
    $(function(){
        $( '.submit_button' ).click(function(){

            var form_values = {};

            $( this ).closest( 'tr' ).find( 'input, select' ).each(function(){  
                form_values[ $(this).attr('name') ] = $(this).val();
            });
            if( form_values.undefined ){
                delete form_values.undefined;
            }

            $.post( "/test.php",
                form_values,
                function(data){
                    //success
                    alert( data );
                },
                "json"
            );

        });
    });
</script>

Update:

I wasn’t happy with my previous answer, so I created a standalone html file to demonstrate that it works.

https://gist.github.com/1367465

You can’t wrap a tag around a , like the others are suggesting, because it’ll break the html of the table.