Answer the question
In order to leave comments, you need to log in
M
M
Maxim Bekin2016-11-25 21:17:28
Maxim Bekin, 2016-11-25 21:17:28
Bootstrap. Passing data from one modal window to another. How to do?
Hello.
Moved to the development of modal windows in the bootstrap.
The essence of the problem: there is a link like the "Callback" button, by clicking it, a modal window is called up, in which the Name and phone number are entered, by clicking on the button, another modal window should open, it should display the phone number entered in the first modal window and a message that you will be called back. How to make a call to the second modal window and transfer the phone there for display - I don’t know and ask for help. How?
Below code:
<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> 2 answer(s)
@mabekin
@mabekin
D
Dmitry Evgrafovich, 2016-11-25 @mabekin
When the button is pressed, save the entered data into a new object, send it to the server with Ajax, and in the callback to Ajax, either close the current window and open a new one, or overwrite the .modal-body content, taking into account the data saved in the object.
M
Maxim Bekin, 2016-11-28 @mabekin
The issue has not yet been resolved - once again the essence of the problem:
1. There is a link in the header that calls a modal callback request window, I use the MODAL bootstrap class for this.
2. It is necessary to make it so that when a person enters a full name and phone number, the current window closes and a new modal window opens, in which there will be a message that "Such and such a phone will be called back in ... minutes."
3. Made a second modal window, which is called through a JS handler written for the first window.
4. In fact, now the new modal window does not appear, but it seems that the modified current modal window appears.
How to do the right thing? (please note that I am a beginner who is learning layout layouts, which will then be loaded into Bitrix as templates.
$(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><!-- строка хедера с меню-->
Similar questions
A
D
Denis Lipatov2016-09-26 16:32:53
Tell me what is wrong with the layout, where are the errors?
2Reply
N
U
unraveltheheaven2022-04-14 19:58:47
Is it possible to change the select icon using Bootstrap?
1Reply
M
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question