Question

我想制作删除模态弹出窗口（模态弹出窗口工作 - 不是在js小提琴中）。事情是我从getUserDelID每次都得到attr用户等于1没有metter我按下哪个按钮。

$('#deleteUser').on('click', function (event) {
    var otherProp = $('#getUserDelID').attr("user");
    alert(otherProp);
    $.ajax({
        type: "POST",
        url: "deleteuser.php",
        how to pass: ? delete = otherProp
        data : $('form.deleteuser').serialize(),
        beforeSend: function () {
            //do your validation
        },
        success: function (msg) {
            $("#deleteholder").html(msg)

        },
        error: function () {
            $("#deleteholder").html("error")
        }
    });
});

Jsfiddle with modal window look：http://jsfiddle.net/r3b3X/

deleteuser.php使所有其他工作如显示错误。

HJ05还制作了一个编辑选项：http://jsfiddle.net/r3b3X/3/

感谢您的帮助。

Answer 1

根据HTML规范，ID只能用于一个元素。如果你想让多个元素具有相同的“名称”，你可以使用类。

就你正试图实现你不希望模态自动打开而言，你希望你的脚本在点击按钮后打开模态，所以在按钮的单击处理程序中你可以从中获取用户id事件数据。

我更新了你的小提琴，将其考虑在内：http://jsfiddle.net/r3b3X/1/

我已将html更新为使用类而不是ID：

<button data-user="1" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button>
<button data-user="2" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button>
<button data-user="3" class="btn btn-primary btn-sm btn-round collapsed getUserDelID"><i class="fa fa-trash-o"></i> Delete</button>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete User" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-user"></i> UserDeleting</h3>
                </div>
            </div>
            <div class="modal-body">
                <div id="deleteholder"></div>
                <div id="msg-loader"></div>
                <form class="deleteuser">
                    <div class="input-group"> <span class="input-group-addon">you sure u want delete id <span class="userId"></span></span>
                        <input type="text" name="username" class="form-control" placeholder="Username" required />
                    </div>
                    <br />
                </form>
                <div style="padding: 10px 15px;background-color: #f5f5f5;border-top: 1px solid #dddddd;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;">
                    <button id="deleteUser" class="btn btn-primary">Delete</button>
                    <button class="btn btn-success" href="#" id="close" class="btn" data-dismiss="modal">Close</a>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

以及JavaScript：

$('.getUserDelID').on('click', function (event) {
    $('.userId').text($(this).data('user'));
    $('#deleteModal').modal();
});

$('#deleteUser').on('click', function (event) {
    var otherProp = $('.userId').text();
    alert(otherProp);
    $.ajax({
        type: "POST",
        url: "deleteuser.php",
        data: $('form.deleteuser').serialize(),
        success: function (msg) {
            $("#deleteholder").html(msg)
        },
        error: function () {
            $("#deleteholder").html("error")
        }
    });
});

具有多个字段的模态删除（和确认）+编辑按钮

1 个答案: