Есть ли простой способ получить модальные данные в Bootstrap 4

Question

До сих пор я использовал Vex-Modals, но сейчас хочу попробовать начальную загрузку 4. Я прочитал всю Модальную Страницу на 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 работает с обратным вызовом, чей параметр data (объект) имеет все эти значения, сохраненные в нем, когда я нажимаю Ok и обратный вызов называется.

Answer 1

Самое простое, что вы можете сделать, это создать разметку модального <form>, Это позволит вам получить доступ как к .modal() и <form> объекты из различных событий (например, hidden.bs.modal) обработчики как this,

Когда у вас есть доступ к самой форме, вы можете использовать .serializeArray() метод jQuery или использовать нативный 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" атрибут также. Этот атрибут фиксирует событие click с event.preventDefault(); вызов. Я считаю, что это вписывается в ваш сценарий, так как вы хотите работать с данными формы без предварительной отправки.

Answer 2

Чтобы получить все данные формы из этого модального режима, вы можете использовать функцию сериализации. Но если вы хотите создать объект js из этого набора данных формы, есть другой вариант. Вы можете использовать функцию serializeArray. Вот сообщение о переполнении стека, где вы можете найти, как преобразовать сериализованный массив в объект js. Надеюсь, что это решит вашу проблему.