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("Спасибо! Ваше сообщение отправлено."); } Проблема: отправляется только второе вызванное окно,независимо от порядка. |
Yuriy29,
одинаковые id ? |
разные: div id="OrderModal" и div id="ContactModal"
|
Yuriy29,
function FormSendOK() одинаково для обоих форм onsubmit="FormSendOK()" |
Пробовал 2 функции,типа function FormSendOK() и function OrderSendOK() - безрезультатно.Пробовал 2 id через запятую в одной ф-ции.Такое ощущение,что подгружается 2 формы сразу,но одна скрыта.После заполнения всех полей,в левом верхнем углу экрана alert"Заполните поле!"
|
Yuriy29,
что такое ajaxSubmit? |
Метод из плагина jQuery.form
|
Yuriy29,
скорее всего вам нужно только это $("#ContactForm").ajaxSubmit(..всё что нужно должно быть тут.); $("#OrderForm").ajaxSubmit(. всё что нужно должно быть тут ..); а onsubmit="FormSendOK()" и сама FormSendOK() не совсем верно используются |
Попробую. Хотя вся конструкция с одним окном работает отменно.
|
Часовой пояс GMT +3, время: 23:37. |