Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2015, 14:26
Новичок на форуме
Отправить личное сообщение для Yuriy29 Посмотреть профиль Найти все сообщения от Yuriy29
 
Регистрация: 26.06.2015
Сообщений: 5

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("Спасибо! Ваше сообщение отправлено.");
      }

Проблема: отправляется только второе вызванное окно,независимо от порядка.
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2015, 14:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Yuriy29,
одинаковые id ?
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2015, 15:27
Новичок на форуме
Отправить личное сообщение для Yuriy29 Посмотреть профиль Найти все сообщения от Yuriy29
 
Регистрация: 26.06.2015
Сообщений: 5

разные: div id="OrderModal" и div id="ContactModal"
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2015, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Yuriy29,
function FormSendOK() одинаково для обоих форм
onsubmit="FormSendOK()"
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2015, 15:46
Новичок на форуме
Отправить личное сообщение для Yuriy29 Посмотреть профиль Найти все сообщения от Yuriy29
 
Регистрация: 26.06.2015
Сообщений: 5

Пробовал 2 функции,типа function FormSendOK() и function OrderSendOK() - безрезультатно.Пробовал 2 id через запятую в одной ф-ции.Такое ощущение,что подгружается 2 формы сразу,но одна скрыта.После заполнения всех полей,в левом верхнем углу экрана alert"Заполните поле!"
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2015, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Yuriy29,
что такое ajaxSubmit?
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2015, 21:01
Новичок на форуме
Отправить личное сообщение для Yuriy29 Посмотреть профиль Найти все сообщения от Yuriy29
 
Регистрация: 26.06.2015
Сообщений: 5

Метод из плагина jQuery.form
Ответить с цитированием
  #8 (permalink)  
Старый 26.06.2015, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Yuriy29,
скорее всего вам нужно только это
$("#ContactForm").ajaxSubmit(..всё что нужно должно быть тут.);
$("#OrderForm").ajaxSubmit(. всё что нужно должно быть тут ..);
а
onsubmit="FormSendOK()" и сама FormSendOK() не совсем верно используются
Ответить с цитированием
  #9 (permalink)  
Старый 26.06.2015, 23:20
Новичок на форуме
Отправить личное сообщение для Yuriy29 Посмотреть профиль Найти все сообщения от Yuriy29
 
Регистрация: 26.06.2015
Сообщений: 5

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько модальных окон на одной странице pleymo jQuery 2 04.06.2014 09:24
AJAX несколько элементов на странице... myocean AJAX и COMET 2 12.11.2012 12:27
AJAX несколько элементов на странице... myocean jQuery 3 12.11.2012 00:00
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Несколько iframe на странице oblomov86 Events/DOM/Window 3 19.12.2011 12:00