How to add edit feature to my edit button on datatable

Question

I am displaying a data table in HTML using data from my SQL database. I have placed an edit button on each row of my table, at the moment it has no functionality and I am unsure how to add functionality. The desired behavior is such that when I click the edit button, a popup form appears and the user will be able to input information for that row.

This is my HTML code, where I create my table:

echo'<tbody>';
    while ($row = $result->fetch_assoc()) {
        $field1name = $row["stud_id"];
        $field2name = $row["first_name"]; 
        $field3name = $row["last_name"];
        $field4name = $row["curr_grdlvl"];
        $field5name = $row["univ_name"];
        $field7name = $row["subject"];
        $field8name = $row["course_id"];
        $field9name = $row["hs_course_code"];
        $field10name = $row["course_start_date"];
        $field11name = $row["credit_hour"];
        $field12name = $row["art_credit"];
        $field13name = $row["duel_credit"];
        $field14name = $row["setting"];
        $field15name = $row["numeric_grade"];
        $field16name = $row["max_numeric_grade"];
        $field17name = $row["cour_end_date"];
        $field18name = $row["letter_grade"];

        echo '<tr> 

                  <td>'.$field1name.'</td> 
                  <td>'.$field2name.'</td> 
                  <td>'.$field3name.'</td> 
                  <td>'.$field4name.'</td> 
                  <td>'.$field5name.'</td> 
                  <td>'.$field6name.'</td> 
                  <td>'.$field7name.'</td>
                  <td>'.$field8name.'</td>
                  <td>'.$field9name.'</td>
                  <td>'.$field10name.'</td>
                  <td>'.$field11name.'</td>
                  <td>'.$field12name.'</td>
                  <td>'.$field13name.'</td>
                  <td>'.$field14name.'</td>
                  <td>'.$field15name.'</td>
                  <td>'.$field16name.'</td>
                  <td>'.$field17name.'</td>
                  <td>'.$field18name.'</td>
                  <td><button type=\"submit\" class=\"btn btn-primary\" formaction="./testerJs.js" id="edit">Edit</button></td>

              </tr>';



    }
    $result->free();
        echo'</tbody>';
        echo'
        <tfoot>
            <tr>
            <th>Student id</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Grade</th>
            <th>College</th>
            <th>Semester</th>
            <th>Subject</th>
            <th>Course id</th>
            <th>Hs_c_code</th>
            <th>start date</th>
            <th>Credit Hour</th>
            <th>Art. credit</th>
            <th>Duel Credit</th>
            <th>Setting</th>
            <th>Num Grade</th>
            <th>Max num grade</th>
            <th>end date</th>
            <th>Let. grade</th>
            <th>Dekete</th>

            </tr>
        </tfoot>
        </table>';

} 

Here is my javascript used for the search functionalities of my data table

        $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder=" '+title+'" />' );
        } );

        // DataTable
        var table = $('#example').DataTable();
        // Apply the search
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    } );

Any help would be appreciated

Here is what I mean when I say popup form. i'd like for a form to pop up and promp user to edit. or I can redirect the user to another page to fill the form out.

Answer 1

I would suggest checking out W3schools's How-to on Modals("Pop-Ups") You should be able to just have a form in the modal, then when the person hits a save button on the bottom, it submits the form and that can send a request to your web server which modifies your SQL database.