Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   bootstrap несколько окон на странице (https://javascript.ru/forum/jquery/56645-bootstrap-neskolko-okon-na-stranice.html)

Yuriy29 26.06.2015 14:26

bootstrap несколько окон на странице
 
Есть 2 модальных окна на странице:
<div id="ContactModal" class="modal hide fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style="width: 400px; ">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			  ×
			</button>
			<h3 id="myModalLabel" style="color:#999999;">
			  Заказ обратного звонка
			</h3>
		  </div>
		  <div class="modal-body" style="height: 220px">
			<form class="contact" name="contact" id="ContactForm" method="post" style="width: 350px;" onsubmit="FormSendOK()">
			  <label class="label" for="name">
				Ваше имя
			  </label>
			  <br>
			  <input type="text" name="name" placeholder="Введите Ваше имя" class="input-xlarge" style="width: 350px;"required="required">
			  <br>
			  <label class="label" for="TelefoneNumber">
				Ваш номер телефона
			  </label>
			  <br>
			  <input type="text" name="tel" placeholder="Введите Ваш номер телефона" class="input-xlarge" style="width: 350px;" required="required">
			  <br>
			  <label class="label" for="Question">
				Тема запроса
			  </label>
			  <br>
			  <select name="Question" class="select-xlarge" style="width: 350px;">
						<option value="" disabled selected>Я хочу:</option>
						<option value="sendOrder">Сделать заказ</option>
						<option value="price">Цена</option>
						<option value="quality">Качество</option>
			  <br>
			  </div>
			  <div class="modal-footer">
				<input class="btn btn-success" id="submit" type="submit" value="Отправить">
			  </div>
		</div>

		<div id="OrderModal" class="modal hide fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style="width: 400px; ">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
			  ×
			</button>
			<h3 id="myModalLabel" style="color:#999999;">
			  Оформление заказа
			</h3>
		  </div>
		  <div class="modal-body" style="height: 220px">
			<form class="contact" name="contact" id="OrderForm" method="post" style="width: 350px;" onsubmit="FormSendOK()">
			  <label class="label" for="name">
				Ваше имя
			  </label>
			  <br>
			  <input type="text" name="name" placeholder="Введите Ваше имя" class="input-xlarge" style="width: 350px;"required="required">
			  <br>
			  <label class="label" for="TelefoneNumber">
				Ваш номер телефона
			  </label>
			  <br>
			  <input type="text" name="tel" placeholder="Введите Ваш номер телефона" class="input-xlarge" style="width: 350px;" required="required">
			  <br>
			  <label class="label" for="Question">
				Я хочу сделать заказ!
			  </label>
			  <br>
			  <select name="Question" class="select-xlarge" style="width: 350px;">
						<option value="" disabled selected>Перезвоните мне</option>
						<option value="morning">Утром</option>
						<option value="afternoon">В обед</option>
						<option value="evening">Вечером</option>
						<option value="speedy">Как можно быстрее/option>
			  <br>
			  <div class="modal-footer">
				<input class="btn btn-success" id="submit" type="submit" value="Отправить">
			  </div>
		</div>

Отправка:
var SendContactForm = {
        type: 'POST',
        resetForm: 'true',
        url: 'mail.php',
        success:    function(){
        }
      }

    function FormSendOK() {
        $("#ContactForm").ajaxSubmit(SendContactForm);
        $("#ContactModal").modal('hide');
        alert("Спасибо! Ваше сообщение отправлено.");
      }

Проблема: отправляется только второе вызванное окно,независимо от порядка.

рони 26.06.2015 14:50

Yuriy29,
одинаковые id ?

Yuriy29 26.06.2015 15:27

разные: div id="OrderModal" и div id="ContactModal"

рони 26.06.2015 15:37

Yuriy29,
function FormSendOK() одинаково для обоих форм
onsubmit="FormSendOK()"

Yuriy29 26.06.2015 15:46

Пробовал 2 функции,типа function FormSendOK() и function OrderSendOK() - безрезультатно.Пробовал 2 id через запятую в одной ф-ции.Такое ощущение,что подгружается 2 формы сразу,но одна скрыта.После заполнения всех полей,в левом верхнем углу экрана alert"Заполните поле!"

рони 26.06.2015 15:57

Yuriy29,
что такое ajaxSubmit?

Yuriy29 26.06.2015 21:01

Метод из плагина jQuery.form

рони 26.06.2015 22:48

Yuriy29,
скорее всего вам нужно только это
$("#ContactForm").ajaxSubmit(..всё что нужно должно быть тут.);
$("#OrderForm").ajaxSubmit(. всё что нужно должно быть тут ..);
а
onsubmit="FormSendOK()" и сама FormSendOK() не совсем верно используются

Yuriy29 26.06.2015 23:20

Попробую. Хотя вся конструкция с одним окном работает отменно.


Часовой пояс GMT +3, время: 23:37.