Bootstrap. Передача данных из одного модального окна в другое. Как сделать?

Question

[Максим Бекин]

Всем привет.
Перешел к освоению модальных окон в бустрапе.
Суть задачи: есть ссылка типа кнопки "Обратный звонок", по ее нажатию вызывается модальное окно, в которое вводится Имя и телефон, по нажатию на кнопку должно открыться другое модальное окно, в нем должен отобразиться введенный в первом модальном окне телефон и сообщение, что вам перезвонят. Как сделать вызов второго модального окна и передать туда телефон для отображения - не знаю и прошу помощи. Как?

Ниже код:

<div class="col-xs-6">
                                <div class="phone">
                                    <a href="#BackCall" class="btn-callback" data-toggle="modal"><b>8 812 426-11-13</b><br/><span class="span_font">Заказать обратный звонок</span>		</a>
                                    <script>
										$(document).ready(function(){
										  //при нажатию на любую кнопку, имеющую класс .btn
										  $(".btn-callback").click(function() {
											//открыть модальное окно с id="myModal"
											$("#BackCall").modal('show');
										  });
										});
									</script>
                                    <!-- HTML-код модального окна -->
                                    <div id="BackCall" class="modal fade">
                                      <div class="modal-dialog">
                                        <div class="modal-content">
                                          <!-- Заголовок модального окна -->
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title">Заявка на обратный звонок</h4>
                                          </div>
                                          <!-- Основное содержимое модального окна -->
                                          <div class="modal-body">
                                            <form role="form">
                                                        <fieldset>
                                            
                                                            <div class="form-group">
                                                                <input type="Name" name="Name" id="Name" class="form-control input-lg" placeholder="Имя">
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="Phone" name="Phone" id="Phone" class="form-control input-lg" placeholder="Номер телефона">
                                                            </div>
                                            
                                                            <div class="row">
                                                                <div class="col-xs-12 col-sm-12 col-md-12">
                                                                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Перезвоните мне">
                                                                </div>
                                            
                                                            </div>
                                                        </fieldset>
                                                    </form>                                          
                                           </div>
                                          <!-- Футер модального окна -->
                                          <div class="modal-footer">
                                          </div>
                                        </div>
                                      </div>
                                    </div> 										
                                </div> 
                            </div>

Answer 1

[Дмитрий Евграфович]

При нажатии кнопки сохраняете введенные данные в новый объект, отправляете их на сервер аяксом, а в коллбэке к аяксу прописываете либо закрытие текущего окна и открытие нового, либо перезапись содержимого .modal-body с учетом данных, сохраненных в объекте.

Comments

[Максим Бекин]

Можно на простом примере показать - кодом? Т.к. пока просто даже непонятно. Пока освоил только html, css да бутстрап, а вот ajax вообще не знаю. Заранее спасибо.

[Максим Бекин]

Да и о сервере тоде говорить то не приходится - это верстка шаблона, потом будет интегрироваться в битрикс.

[Дмитрий Евграфович]

Максим Бекин: https://jsfiddle.net/zyLkstwf/ - заглавные буквы в аттрибутах html не используйте. В скриптах можно, а имена атрибутов насколько мне известно нечувствительны к регистру.

[Максим Бекин]

Огромное спасибо!

[Максим Бекин]

Добавил код к себе, но почему-то по нажатию на кнопку с id "callback-submit" форма просто закрывается. В чем может быть дело? И еще вопрос - можно как-то трассировать этот код (я сам из программистов, обычно в отладчике можно все просмотреть, но как с ява скрипт быть?)

[Максим Бекин]

Вот, что не так? https://jsfiddle.net/#&togetherjs=92kDeb2wqF

[Дмитрий Евграфович]

Максим Бекин: сранвите ссылку, при клике на которую открывается модальное окно

[Дмитрий Евграфович]

Максим Бекин: да .про заглавные буквы - ошибся. они не раличаются в именах атрибутов, а не в самих атрибутах. то есть class="" и Class="" будут одинаковые, а не значения в них указанные. По поводу ссылки - у вас модальное окно при клике вызывается два раза. первый атрибутом в ссылке, второй (и сразу же закрывается при этом) - в самом скрипте

[Максим Бекин]

Не понимаю как правильно сделать. Получается при нажатии на ссылку с обратным со звонком происходит вызов модального окна (класс с ID=BackCall и для этого скрипт не нужен. Но когда я нажимаю на кнопку модального окна с ID=callback-submit должно произойти закрытие текущего модального окна и открытие нового модального окна (по дизайну это разные окна). Хоть убейте - не могу понять как это сделать пока (сижу читаю учебник, но нужна помощь в деталях). Очень прошу объяснить на пальцах. Заранее признателен. Спасибо.

Answer 2

[Максим Бекин]

Вопрос пока так и не удалось решить - еще раз суть проблемы:
1. В хедере есть ссылка, которая вызывает модальное окно запроса на обратный звонок, использую для этого класс бутстрап MODAL.
2.Нужно сделать так, чтобы когда человек ввел ФИО и телефон текущее окно закрылось и открылось новое модальное, в котором будет сообщение что "Такому то на такой то телефон перезвонят через ...минут".
3. Сделал второе модальное окно, которое вызывается через JS обработчик, написанный для первого окна.
4. По факту сейчас новое модальное окно не появляется, а похоже появляется измененное текущее модальное.

Как сделать нужное? (прошу учесть, что я новичок, который учится верстке макетов, которые потом будут грузиться в Битрикс в качестве шаблонов.

$(document).ready(function(){
		var clientData = {
		name: '',
		phone: ''
		};
		$('#BackCall').on('keyup', '#Name', function() {
		clientData.name = $(this).val()
		})
		.on('keyup', '#Phone', function() {
		clientData.phone = $(this).val()
		})
		.on('click', '#callback-submit', function(e) {
		e.preventDefault(); // чтоб форма в демке не отправлялась
		$('.modal-body').html(clientData.name + ', мы вам перезвоним на номер ' + clientData.phone);
		})
		
		});
		$("#callback-submit").click(function() {
		$("#BackCallConf").modal('show');
		});

<div class="col-xs-6">
                                <div class="phone">
                                    <a href="#BackCall" class="btn-callback" data-toggle="modal"><b>8 812 426-11-13</b><br/><span class="span_font">Заказать обратный звонок</span>		</a>
                                    <!-- HTML-код модального окна -->
                                    <div id="BackCall" class="modal fade">
                                      <div class="modal-dialog">
                                        <div class="modal-content">
                                          <!-- Заголовок модального окна -->
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title">Заявка на обратный звонок</h4>
                                          </div>
                                          <!-- Основное содержимое модального окна -->
                                          <div class="modal-body">
                                            <form role="form">
                                                        <fieldset>
                                            
                                                            <div class="form-group">
                                                                <input type="Name" name="Name" id="Name" class="form-control input-lg" placeholder="Имя">
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="Phone" name="Phone" id="Phone" class="form-control input-lg" placeholder="Номер телефона">
                                                            </div>
                                            
                                                            <div class="row">
                                                                <div class="col-xs-12 col-sm-12 col-md-12">
                                                                    <input id="callback-submit" type="submit" class="btn btn-lg btn-success btn-block" value="Перезвоните мне"data-dismiss="modal"> 
                                                                </div>
                                            
                                                            </div>
                                                        </fieldset>
                                                    </form>                                          
                                           </div>
                                          <!-- Футер модального окна -->
                                          <div class="modal-footer">
                                          </div>
                                        </div>
                                      </div>
                                    </div> 										

                                    <!-- Модальное окно - подтверждение принятия запроса на обратный звонок -->
                                    <div id="BackCallConf" class="modal fade">
                                      <div class="modal-dialog">
                                        <div class="modal-content">
                                          <!-- Заголовок модального окна -->
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h4 class="modal-title">Заявка на обратный звонок - принята</h4>
                                          </div>
                                          <!-- Основное содержимое модального окна -->
                                          <div class="modal-body">
                                            <form role="form">
                                                        <fieldset>
                                            				
                                                            <div class="form-group">
                                                                <input type="Name" name="Name" id="Name" class="form-control input-lg" placeholder="Имя">
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="Phone" name="Phone" id="Phone" class="form-control input-lg" placeholder="Номер телефона">
                                                            </div>
                                            
                                                            <div class="row">
                                                                <div class="col-xs-12 col-sm-12 col-md-12">
                                                                    <input id="callback-submit" type="submit" class="btn btn-lg btn-success btn-block" value="Запрос принят"data-dismiss="modal"> 
                                                                </div>
                                            
                                                            </div>
                                                        </fieldset>
                                                    </form>                                          
                                           </div>
                                          <!-- Футер модального окна -->
                                          <div class="modal-footer">
                                          </div>
                                        </div>
                                      </div>
                                    </div> 										
                                </div> 
                            </div>
                    	</div>
                    </div>
                 </div>
              </div>
            </div><!-- строка хедера с меню-->