表格中的“模態”形式的“觸發按鈕”是從PHP中的循環填充的

Question

我從數據庫中填充了一個這樣的表：

當我按下編輯按鈕時，將打開一個帶有表單的模態，其中包含要從每個人進行編輯的數據，例如：

我要如何從php觸發“保存”按鈕？

我的代碼：

<table style="width: 100%;" aria-describedby="example_info" role="grid" id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%">
                        <thead>
                            <tr role="row">
                                <th aria-label="Name: activate to sort column descending" aria-sort="ascending" style="width: 256px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting_asc">Name</th>
                                <th aria-label="Position: activate to sort column ascending" style="width: 400px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Surname</th>
                                <th aria-label="Office: activate to sort column ascending" style="width: 197px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Country</th>
                                <th aria-label="Salary: activate to sort column ascending" style="width: 154px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Rating</th>
                                <th aria-label="Salary: activate to sort column ascending" style="width: 154px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Date</th>
                                <th aria-label="Salary: activate to sort column ascending" style="width: 154px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Review Visible</th>
                                <th aria-label="Salary: activate to sort column ascending" style="width: 154px;" colspan="1" rowspan="1" aria-controls="example" tabindex="0" class="sorting">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php
                            while ($row = $query->fetch()) {?>

                                <tr class="odd" role="row">
                                    <td class="sorting_1"><?=$row['first_name'];?></td>
                                    <td><?=$row['last_name'];?></td>
                                    <td><?=$row['country'];?></td>
                                    <td><?=number_format($row['rating'], 2);?></td>
                                    <td><?=$row['feedback_date'];?></td>
                                    <td><?=$row['feedbackVisible'];?></td>
                                    <td><button type="button" data-toggle="modal" data-id="myModalHorizontal_<?=$row['csid'];?>" data-target="#myModalHorizontal_<?=$row['csid'];?>" name="button_<?=$row['csid']?>" class="btn btn-xs btn-success">
                                      <span class="glyphicon glyphicon-pencil"></span>&nbsp;
                                    </button></td>
                                </tr>
                                <div class="modal fade" id="myModalHorizontal_<?=$row['csid'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <!-- Modal Header -->
                                            <div class="modal-header">
                                                <button type="button" class="close" 
                                                   data-dismiss="modal">
                                                       <span aria-hidden="true">&times;</span>
                                                       <span class="sr-only">Close</span>
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">
                                                    Edit Feedback : <?=$row['first_name'];?>(<?=$row['country'];?>)
                                                </h4>
                                            </div>
                                            <!-- Modal Body -->
                                            <div class="modal-body">
                                                <form class="form-horizontal" role="form">

                                                  <div class="form-group">
                                                    <label  class="col-sm-4 control-label">Homepage Teaser</label>
                                                    <div class="col-sm-8">
                                                        <input type="email" class="form-control" 
                                                        id="teaser_<?=$row['csid'];?>" value="<?=$row['teaser_text'];?>"/>
                                                    </div>
                                                  </div>

                                                  <div class="form-group">
                                                    <label class="col-sm-4 control-label">Feedback</label>
                                                    <div class="col-sm-8">
                                                        <textarea class="form-control" id="textarea" cols="30" rows="5" name="feedbackcomment"><?=$row['feedback'];?></textarea>
                                                    </div>
                                                  </div>

                                                  <div class="form-group">
                                                    <label class="col-sm-4 control-label">Feedback Comment</label>
                                                    <div class="col-sm-8">
                                                        <textarea class="form-control" id="textarea" cols="30" rows="3" name="feedbackcomment"><?=$row['feedbackComment'];?></textarea>
                                                    </div>
                                                  </div>

                                                  <div class="form-group">
                                                    <label class="col-md-4 control-label">Display Website</label>
                                                    <div class="col-md-8">
                                                        <input name="displayWebsite" id="checkbox-0" <? if ($row['feedbackVisible'] == 1){ echo "checked"; }?> type="checkbox">
                                                    </div>
                                                  </div>
                                                  <button type="button" name="submit" class="btn btn-primary">Save</button>
                                                </form>
                                            </div>
                                            <!-- Modal Footer -->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            <?php 
                                if (isset($_POST['submit'])) {
                                    console_log('Button', 'Pressed');
                                }
                            }
                        ?>
                        </tbody>
                    </table>

我嘗試觸發的實際部分是：

if (isset($_POST['submit'])) {
   console_log('Button', 'Pressed');
}

有任何想法嗎？

Answer 1

如果我理解。 您需要使用AJAX。 如果您使用的是JQuery，請參閱this 。 例：

        $('form').submit(function(event) {
            event.preventDefault();
            $.post("yourPHPpage.php", $('form').serialize(), function(data) {
                alert(data);
            });
        });