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")
})

当我点击data并调用回调时，Vex使用一个回调，其参数Ok（一个对象）包含了保存在其中的所有值。

Answer 1

您可以做的最简单的事情是将模态的标记创建为<form>。这样，您就可以使用.modal()从各种事件（例如<form>）处理程序访问hidden.bs.modal和this个对象。

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

＆＃13;

$('#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);
});

＆＃13;

<!-- 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>

＆＃13;

注意：即使“保存更改”按钮属于提交类型，表单也不会以这种方式直接提交，因为还有data-dismiss="modal"属性。该属性通过event.preventDefault();调用捕获click事件。我相信这适合您的场景，因为您希望在不首先提交表单数据的情况下处理它。

Answer 2

要从该模式获取所有表单数据，您可以使用serialize函数。但是如果你想从那组form-data构造js对象，还有另一种选择。您可以使用serializeArray功能。这是一个堆栈溢出post，您可以在其中找到如何将序列化数组转换为js对象。希望这能解决你的问题。

有没有简单的方法来获取Bootstrap 4中的模态数据

2 个答案: