将值从 mysql db 传递到 bootstrap 模态

Question

我是核心 php 编码的新手，我对将 db 值调用到 bootstrap 模态弹出窗口

有疑问

<td class="bgimg"><a href="#myModal" data-toggle="modal" data-target="#edit-modal" id="<?php echo $obj['service_id']; ?>" class="service_title"><?php echo $obj["service_name"]; ?></a></td>

这是我的代码中用于从 table 发送 "service_id" 的一行，它应该显示在模式弹出窗口中，从那里，用户必须填写文本字段并且它应该更新到另一个具有相同 ID 的 table。

这里是弹窗的代码

<div id="edit-modal" class = "modal fade" tabindex="-1" role="dialog" style="padding-top: 150px;" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Choose your slots</h4>
            </div>
            <div class="modal-body">
            <p class="edit-content">service id:</p>
                <form role="form1" name="loginform" method="post" class="login-form">
                    <div class="form-group">
                        <table align="center">
                            <tr>
                                <td colspan="2"><center>slot 1</center></td>
                            </tr>
                            <tr>
                                <td><input type="date" id="datePicker" name="slot1_dt"> </td>
                                <td><input type="time" name="slot1_tm"> </td>
                            </tr>
                            <tr>
                                <td colspan="2"><center>slot 2</center></td>
                            </tr>
                            <tr>
                                <td><input type="date" id="datePicker" name="slot2_dt"> </td>
                                <td><input type="time" name="slot2_tm"> </td>
                            </tr>
                            <tr>
                                <td colspan="2"><center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button></center></td>
                            </tr>
                        </table>
                        <?php
                        if(isset($_REQUEST["book"]))
                        {
                            if($_REQUEST["book"])
                            {
                                $service_id=$_REQUEST["serv_id"];
                                $customer_id=$_REQUEST["cust_id"];
                                $slot1_dt=$_REQUEST["slot1_dt"];
                                $slot2_dt=$_REQUEST["slot2_dt"];
                                $slot1_tm=$_REQUEST["slot1_tm"];
                                $slot2_tm=$_REQUEST["slot2_tm"];
                                $slot1=$slot1_dt." ".$slot1_tm;
                                $slot1 = date("Y-m-d H:i:s",strtotime($slot1));
                                $slot2=$slot2_dt." ".$slot2_tm;
                                $slot2 = date("Y-m-d H:i:s",strtotime($slot2));
                                $insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`) VALUES ('$customer_id','$service_id','$slot1','$slot2')";
                                mysqli_query($con, $insertqry) or die(mysqli_error($con));
                            }
                        }

                        ?>

                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

它很好地显示了结果，但是 service_id 没有传递到数据库中更新它

提前致谢

Answer 1

使用modal event listener,

$(document).ready(function(){
    $('#edit-modal').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).attr('id');
        alert(id);
        $("#service_id").val(id);
    });
});

并在 <form></form> 模式中添加隐藏输入

<input type="hidden" id="service_id" name="serv_id" value="">

旁注：不要使用 $_REQUEST，而是使用 $_POST 并转义字符串。

Answer 2

$(document).on("click", "#upload_image", function () {
    var myBookId = $(this).data('id');
    $(".modal-body #activity_id___").val( myBookId );
    console.log(myBookId);
    // As pointed out in comments, 
    // it is superfluous to have to manually call the modal.
    // $('#addBookDialog').modal('show');
});  
<input type="hidden" name="activity_id___" id="activity_id___" value=""/>

将值从 mysql db 传递到 bootstrap 模态

pass a value from mysql db to bootstrap modal

php

mysql

modal-dialog

popup