Запустить
<!doctype html> <html lang="ru"> <head> <title>Bootstrap 4 Navbar - Как создать вертикальное основное меню для сайта</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Modal --> <div class="modal fade" id="modalCity" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Укажите город</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="city">Выберите город</label> <select class="form-control" id="city"> <option>Москва</option> <option>Санкт-Петербург</option> <option>Новосибирск</option> <option>Екатеринбург</option> <option>Нижний Новгород</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> <button id="setCity" type="button" class="btn btn-primary">ОК</button> </div> </div> </div> </div> <div class="container"> <h3 class="mt-5">HTML форма</h3> <form id="exampleForm" action="/examples/vendors/feedback/process/process.php" novalidate> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" name="email" placeholder=""> </div> <div class="form-group"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalCity"> Указать город </button> </div> <button type="submit" class="btn btn-primary">Отправить</button> </form> <div id="log" class="alert alert-warning mt-5"> <p>Данные, которые будут отправлены на сервер:</p> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap JS --> <script src="/examples/vendors/bootstrap-4/js/bootstrap.bundle.js"></script> <script> $(function () { $('#setCity').on('click', function () { var city = $(this).closest('.modal-content').find('#city').val(); if ($('#exampleForm').find('[name="city"]').length > 0) { $('#exampleForm').find('[name="city"]').val(city); $('#modalCity').modal('hide'); return; } var inputCity = $('<input>').attr({ 'type': 'hidden', 'name': 'city' }).val(city); $('#exampleForm').prepend(inputCity); $('#modalCity').modal('hide'); }); $('#exampleForm').on('submit', function (e) { e.preventDefault(); // создадим объект FormData и добавим в него данные из формы var formData = new FormData($('#exampleForm')[0]); var output = $('<ul></ul>'); for (var pair of formData.entries()) { var item = $('<li></li>'); item.text(pair[0] + ': ' + pair[1]); output.append(item); } $('#log').append(output); }); }); </script> </body> </html>