Editable table in php

[Abrar]

Hi Friends,

I need to create a editable table and all the values in the table should be summited with a single save button, Please help. I was able to save the rows separately but actually what i need is to submit all the modified text in a single button instead a separate button beside each rows.

[requinix]

Okay. What code have you written so far? What have you tried changing to make it work with one save button for them all?

[Abrar]

Hi Requinix,

Thanks for ur reply!

here is my code!

   <table class="table table-hover font" id="user_table">
        <tr>
            <th>PRODUCT</th>
            <th>DESCRIPTION</th>
            <th>REMARKS</th>
            <th>RESULT DESCRIPTION</th>
            <th>ACTION</th>
            </th>
        </tr>
        <?php

        $sql_fin_update = "SELECT
A.Department_Code
    || '/'
    ||A.Product_Code as Product,B.Description_Arb as Description,A.Remarks as Remarks,D.Result_Description as Result_Description,
C.Showroom_Code as showroom_Code,C.Invoice_No as Invoice_No,A.Entered_On as Entered_On,A.User_Id as User_Id
From
Inv_Qc_Schedule_Detail A ,Inv_Dsales C,Inv_Product B,Inv_Qc_Visitresult D
Where
A.Showroom_Code       = '$SHOWROOM_CODE_Q'
And A.Invoice_No      = $invoice_q
And C.Showroom_Code   = A.Showroom_Code
And C.Invoice_No      = A.Invoice_No
And C.Serial_No       = A.Inv_Srlno
And B.Department_Code = C.Department_Code 
And B.Product_Code    = C.Product_Code
And D.Visit_Result    = A.Qc_Finding";

        $sql_fin_parse = oci_parse($conn, $sql_fin_update);
        ociexecute($sql_fin_parse);

        while ($row_coun_fin = oci_fetch_array($sql_fin_parse, OCI_RETURN_NULLS + OCI_ASSOC)) {
        ?>
            <tr id="row<?php echo $row_coun_fin['PRODUCT']; ?>">
                <td id="pro_val<?php echo $row_coun_fin['PRODUCT']; ?>"><?php echo $row_coun_fin['PRODUCT']; ?></td>
                <td id="desc_val<?php echo $row_coun_fin['PRODUCT']; ?>"><?php echo $row_coun_fin['DESCRIPTION']; ?></td>
                <td id="remarks_val<?php echo $row_coun_fin['PRODUCT']; ?>"><?php echo $row_coun_fin['REMARKS']; ?></td>
                <td id="result_val<?php echo $row_coun_fin['PRODUCT']; ?>"><?php echo $row_coun_fin['RESULT_DESCRIPTION']; ?></td>
                <td style="display: grid;">
                    <input type='button' class="edit_button btn btn-info btn-sm m-1" id="edit_button<?php echo $row_coun_fin['PRODUCT']; ?>" value="edit" onclick="edit_row('<?php echo $row_coun_fin['PRODUCT']; ?>');">
                    <input type='button' style="float: right;" class="save_button btn btn-success btn-sm m-1" id="save_button<?php echo $row_coun_fin['PRODUCT']; ?>" value="save" onclick="save_row('<?php echo $row_coun_fin['PRODUCT']; ?>')">
                </td>
            </tr>
        <?php
        }
        ?>
                         
    </table>

    function save_row(id) {
    
        var remarks_text = document.getElementById("remarks_text" + id).value;
        var remarks_text = document.getElementById("remarks_text" + id).value;
        var remarks_text = document.getElementById("remarks_text" + id).value;
        var result_text = document.getElementById("result_text" + id).value;
        console.log(remarks_text);
        console.log(result_text);
       
        
        $.ajax({
            type: 'post',
            url: 'modify_records.php',
            data: {
                edit_row: 'edit_row',
                row_id: id,
                remarks_val: remarks_val,
                result_val: result_val,
                showroom_code_q: showroom_code_q,
                invoice_q: invoice_q
                //  showroom_code_q: showroom_code_q,
                // invoice_q: invoice_q
            },
            success: function(response) {
                if (response == "success") {
                    document.getElementById("remarks_val" + id).innerHTML = remarks_val;
                    document.getElementById("result_val" + id).innerHTML = result_val;
                    document.getElementById("edit_button" + id).style.display = "block";
                    document.getElementById("save_button" + id).style.display = "none";
                }
            }
        });
        
    }

Thank you. Please assist me

[requinix]

I don't know where the textboxes are, but that might not matter.

The simplest method to make this work would be to save all the rows by using a loop to find all the rows and update each one individually. That's okay if you don't have many rows.
If you do have many rows then you'll have to make some more significant changes. The first one would be making modify_records.php able to update multiple records at once...

[Psycho]

I'll add to @requinix's response.

As he said, the easiest approach would be to have a save button that loops through all the rows in the table (except the header) and executes the save individually. Your current save operation only requires an id value. So, I would leave the current save_row() functiona unchanged and then do two things:

1. In the script that builds the table, create a hidden field with the value being the ID
2. Create a new function [e.g. save_all()]. Have that function iterate through every row in the table and get the ID value and execute the save_row() function

However, as he said if you have "lots" of rows, this may not be a good approach because each AJAX call would have to be performed separately. You would have to do some testing with the maximum number of records you expect to have to see if it will be an issue. If so, I would take a different approach.

I would make the values in the rows actual input fields - making the field names an array. Something like:

echo "<input type='text' name='records[{$row_coun_fin['PRODUCT']}][remarks_val]' value='{$row_coun_fin['REMARKS'];}'>";

Then you can submit the whole form via a normal POST or via AJAX. Then the receiving page would just need to iterate over the $_POST['records'] array

foreach($_POST['records'] as $productID => $productData)
{

	//Update the data for the current record from the values in $productData

}