jquery - 有没有简单的方法可以获取 Bootstrap 4 中模态的数据

Question

我一直在使用Vex-Modals到目前为止，但现在想尝试 bootstrap 4。我读了全文 Modal-Page of bootstrap.com ，但我没有找到像在 vex 中那样容易获取模态表单数据的方法。

到目前为止我发现:这是可能的:

$('#myModal').on('hide.bs.modal', function (e) {
  // ask value of $("#form-input1")
  // ask value of $("#form-input2")
  // ask value of $("#form-input3")
})

Vex 使用一个回调，当我单击Ok 并调用回调时，其参数data(一个对象)保存了所有这些值。

Answer 1

您可以做的最简单的事情是将模态标记创建为 <form> 。这将允许您访问 .modal()和 <form>来自各种事件(例如 hidden.bs.modal )处理程序的对象为 this .

当您有权访问表单本身时，您可以使用 .serializeArray() jQuery 方法或使用 native FormData 类如下例所示。

$('#modal-form').on('hidden.bs.modal', function (event) {
    // `this` is the modal window, which is also a `<form>` in our case

    // Option 1: using `.serializeArray()` of jQuery
    var fieldsAsArray = $(this).serializeArray();
    console.log('fieldsAsArray', fieldsAsArray);

    // Option 2: using native `FormData` object
    var fieldsAsFormData = new FormData(this);
    console.log('fieldsAsFormData', fieldsAsFormData);
});

<!-- Note the `<form>` tag -->
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <!-- actual form markup -->
                <div class="form-group">
                    <label for="field1">Example label</label>
                    <input name="field1" type="text" class="form-control" id="field1" placeholder="Example input">
                </div>
                <div class="form-group">
                    <label for="field2">Another label</label>
                    <input name="field2" type="text" class="form-control" id="field2" placeholder="Another input">
                </div>
                <!-- /actual form markup -->

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</form>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
    Open modal form
</button>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

注意:即使“保存更改”按钮的类型为提交，表单也不会以这种方式直接提交，因为有 data-dismiss="modal"属性也是如此。该属性捕获带有 event.preventDefault(); 的点击事件。称呼。我相信这适合您的场景，因为您希望在不先提交表单数据的情况下处理表单数据。