如何从模态上的按钮获取数据ID?

时间:2018-06-04 14:23:48

标签: php jquery bootstrap-modal

我在PHP中创建了一个数据显示页面,我想修改特定数据。然后,在单击更新数据表单的弹出模式后,单击用于修改数据的按钮。所以,我不明白如何获取modal上的数据id来更新特定数据。

打开模态的按钮:

<button 
title="Edit Sub Category" 
class="btn btn-success edit_subcategory" 
dataid="<?php echo $row['id']; ?>"><i class="glyphicon glyphicon-pencil"></i>
</button>

更新数据的模式:

<div class="modal fade" id="EDIT_SUBCATEGORY" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Update Sub Category</h4>
                </div>
                <div class="modal-body update_subcategory1">
                    <?php                               
                        $id = $_POST['dataid']; **<!-- Here i want data id-->**
                        $result = $conn->query("SELECT * FROM wm_subcategory WHERE id='$id'");
                        if($result->num_rows > 0){
                            while($row = $result->fetch_assoc()){
                                ?>
                                <input type="hidden" value="<?php echo $row["subcate_id"] ?>" name="subcate_id" class="form-control">
                                <div class="form-group">
                                    <label for="subcate_name">Category Name</label>
                                    <input type="text" value="<?php echo $row["subcate_name"] ?>" name="subcate_name" class="form-control">
                                </div>
                                <?php 
                            }
                        }
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="submit" name="update_subcategory" class="btn btn-success">Update</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

Js从模态中获取数据:

$(document).ready(function () {
    $('.edit_subcategory').on('click', function () {
        Id = $(this).data('id');
        $('#EDIT_SUBCATEGORY').modal('show');
    });
});

1 个答案:

答案 0 :(得分:1)

您可以使用jQuery&#39; data()方法存储ID:

$(document).ready(function () {
    $('.edit_subcategory').on('click', function () {
        var modalDiv = $('#EDIT_SUBCATEGORY');

        // Get id
        var id = $(this).attr('dataid');

        // Store the id and show modal        
        modalDiv.data('selectedId', id).modal('show');
    });
});

然后,在模态的提交按钮上单击:

$('#submit').on('click', function() {
    // Get the stored id
    var id = $('#EDIT_SUBCATEGORY').data('selectedId');

    // Continue ...
});