Question

对不起，我不熟悉JQuery，但我会全力以赴地解释。
如下面的代码所示，我将创建并显示带动态输入的bootstrap模式价值＆＃34; id＆＃34;指定要删除的项目。

<div class="modal fade" id="myDeleteModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Input the password to delete</h2>
            </div>
        <div class="modal-body">
            <form  id="modal-form" method="post" action="password_wrong.html"   enctype="multipart/form-data" >
                <div class="form-group">
                    <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/>
                    <input type="hidden"  name="delete_id" value="{dynamic}"/>
                </div>
            </form>
        </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-default" form="modal-form" >Delete</button>
    </div>
 </div>

唯一有活力的地方是

<input type="hidden"  name="delete_id" value="{dynamic}"/>

我怎么能这样做？

Answer 1

使用jQuery选择输入并设置值

 $("input[name=delete_id]").val(deleteVal);

$('.openmodal').click(function () {
  var deleteVal = $(this).attr('data-val');
  console.log(deleteVal)
 
    $('#myDeleteModal').modal({
        show: true
    });
    
    $("input[name=delete_id]").val(deleteVal);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<a href="#" class="btn btn-default openmodal"  data-val="1">Delete 1</a>
<a href="#" class="btn btn-default openmodal" data-val="2">Delete 2</a>


<div class="modal fade" id="myDeleteModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Input the password to delete</h2>
            </div>
        <div class="modal-body">
            <form  id="modal-form" method="post" action="password_wrong.html"   enctype="multipart/form-data" >
                <div class="form-group">
                    <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/>
                    <input type="hidden"  name="delete_id" value="{dynamic}"/>
                </div>
            </form>
        </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-default" form="modal-form" >Delete</button>
    </div>
 </div>
</div>

或使用bootstrap show.bs.modal事件

$('#myDeleteModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget)   
    var deleteVal = button.attr('data-val');
     console.log(deleteVal) 
    $(this).find('input[name=delete_id]').val(deleteVal) 
})
$('.openmodal').click(function () { 
        $('#myDeleteModal').modal('show',$(this)); 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <a href="#" class="btn btn-default openmodal"  data-val="1">Delete 1</a>
    <a href="#" class="btn btn-default openmodal" data-val="2">Delete 2</a>


    <div class="modal fade" id="myDeleteModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Input the password to delete</h2>
                </div>
            <div class="modal-body">
                <form  id="modal-form" method="post" action="password_wrong.html"   enctype="multipart/form-data" >
                    <div class="form-group">
                        <input type="password" class="form-control" id="res-passwd" name="password" required="required" placeholder="Password:"/>
                        <input type="hidden"  name="delete_id" value="{dynamic}"/>
                    </div>
                </form>
            </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-default" form="modal-form" >Delete</button>
        </div>
     </div>
    </div>

如何使用动态表单内容创建和显示模式？

1 个答案: