Заполнение формы из строки таблицы

Question

Я добавил кнопку в конце строки таблицы данных, предназначенную для обновления информации в базе данных для выбранной строки.

Когда я нажимаю кнопку обновления, появляется форма ссоответствующие поля для обновления.

В идеале, я хотел бы, чтобы форма автоматически заполнялась информацией из строки таблицы, которую я выбрал для обновления

Код ...

Таблица:

<div class="viewalljob tab-pane show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <h2>Edit Job Table</h2>
    <table id="edit-job-table" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="job_id">ID</th>
                <th class="job_date">Date</th>
                <th class="job_company">Company Name</th>
                <th class="job_contact">Contact</th>
                <th class="job_from">From</th>
                <th class="job_to">To</th>
                <th class="job_driver nowrap">Driver</th>
                <th class="job_income">Income (£)</th>
                <th class="job_payment">Payment (£)</th>                        
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <!--Fetch from Database-->
            <!--Connect To Database-->
            <?php
            $host_name = 'xxx';
            $database = 'xxx';
            $user_name = 'xxx';
            $password = 'xxx';
            $conn = mysqli_connect($host_name, $user_name, $password, $database);

            // Check connection

            if (!$conn) {
                die("Connection failed: " . mysqli_connect_error());
            }
            $sql = "SELECT *,AS markup
                    FROM `table`
                    GROUP BY id";
            $query = mysqli_query($conn, $sql);

            if (mysqli_num_rows($query) > 0) {
                // output data of each row
                while($result = mysqli_fetch_assoc($query)) {
                    echo "<tr>
                    <td class='job_id'>".$result['id']."</td>
                    <td class='job_date'>".$result['adddate']."</td>
                    <td class='job_company'>".$result['customer']."</td>
                    <td class='job_contact'>".$result['addcontact']."</td>
                    <td class='nowrap job_from'>".$result['addfrom']."</td>
                    <td class='nowrap job_to'>".$result['addto']."</td>
                    <td class='nowrap job_driver'>".$result['adddriver']."</td>
                    <td class='currency job_income'>".$result['addincome']."</td>
                    <td class='currency job_payment'>".$result['addpayment']."</td>
                    <td><button type='button' name='update' id=".$result['id']." class='btn btn-warning btn-xs update updatebtn'>Update</button></td>
                    <td><button type='button' name='delete' id=".$result['id']." class='btn btn-danger btn-xs delete deletebtn'>Delete</button></td>
                    </tr>";
                }
            } else { 
                echo "0 results";
            }
            mysqli_close($conn);
            ?>
        </tbody>
    </table>
</div>
<div id="contactForm3">
    <h1>Edit Job</h1>
    <form id="dataForm" name="dataform" method="POST" action="/">
        /**** FORM DATA ****/
    </form>
</div>

JS, чтобы открыть форму:

$(function() {
    // contact form animations
    $('.update').click(function() {
        $('#contactForm3').fadeToggle();
    })
    $(document).mouseup(function (e) {
        var container = $("#contactForm3");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.fadeOut();
        }
    });
});

Я добавил кнопку обновления, используя <td><button type='button' name='update' id=".$result['id']." class='btn btn-warning btn-xs update updatebtn'>Update</button></td> Я дал id=".$result['id'].", надеясь, что я могу использовать это для заполненияформа из ID

Я предполагаю, что мне нужно будет подключиться к таблице базы данных, что-то вроде:

<form>
<?php
//Connect to Database ... //
$sql = SELECT * FROM `table`
       WHERE ID = ???

       $query = mysqli_query($conn, $sql);

       if (mysqli_num_rows($query) > 0) {
       // output data of each row
       while($result = mysqli_fetch_assoc($query)) {
          echo "<span>
                    <label> label1 </label>
                        <input value = ".$result['column'].">
                </span>";
                        }
                    } else { 
                        echo "0 results";
                    }
                    mysqli_close($conn);
                    ?>

Я надеюсь, что это правильно, и кто-то может мне помочьсделать это?

Answer 1

На самом деле вы можете добиться этого, используя javascript / jquery, получить элемент строки из отображаемой таблицы, из которого вы можете получить каждое значение столбцов / входных данных, как показано ниже:

$('.updatebtn').on('click', function(e) {
    e.preventDefault();

    var row = $(this).closest('tr'); //get table row from displayed table.
    var form = $('#contactForm3').fimd('form'); //form to be populate.
    //make sure your form input field with same name as the column name.
    //now create form_data object with key as same name as column/input name .
    var form_data = { 'id' : row.find('.job_id').value(),
                    'adddate' : row.find('.job_date').value(),
                    .....
                    'addpayment' : row.find('.job_payment').value()
                    }

    //Apply loop to populate values in form.
    $.each(form_data, function(key, value){
        form.find('input[name="'+ key +'"]').val(value);
    });

});

Затем в форме отправьте обновленную запись базы данных./ row с использованием PHP (надеюсь, вы хорошо это знаете, если нет, дайте мне знать, я обновлю свой код).