Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Модальное окно bootstarp и отправка формы (https://javascript.ru/forum/library-toolkit-framework/39412-modalnoe-okno-bootstarp-i-otpravka-formy.html)

Hol1killer 28.06.2013 19:00

Модальное окно bootstarp и отправка формы
 
Добрый вечер друзья


Хочу реализовать отправку формы в модальном окне bootstarp через ajax

Вот js код для проверки формы и отправки AJAX запроса

(function($){ 
		$("#contact").submit(function() { return false; }); 
		$("#send").on("click", function(){
			
			var name = $("#name").val();
			var phone = $("#phone").val();
		
			if ( name == "" ) { $("label[for = 'name']").addClass("error"); name = false; }
			else { $("label[for = 'name']").removeClass("error"); name = true; }
		
			if ( phone == "") { $("label[for = 'phone']").addClass("error"); phone = false; }
			else { $("label[for = 'phone']").removeClass("error"); phone = true; }
			
			if ( name == true && phone == true )	{
			$.ajax({
					type: 'POST',
					url: '/send/script.php',
					data: $("#contact").serialize(),
					success: function() {  $("#contact").remove(); $(".thanks").show(); }
					});
					return false;
				}
				else return false;
			});
	})(jQuery);


Вызываю модальное окно таким образом
<div class="text"> <a href="#" role="button" class="btn" data-toggle="modal"> Текст </a> </div>


Не могу понять почему не исполняется событие click на кнопке <input type="submit" id="send" value="Отправить" />

Hol1killer 03.07.2013 18:41

Видимо никто не знает почему так происходит я правильно понимаю?

рони 03.07.2013 19:47

Hol1killer,
а html пример где? но скорее всего кнопки ещё нет когда вы вешаите на неё обработчик click

Hol1killer 04.07.2013 00:30

рони,
Спасибо за ответ

Привожу html
<div class="custom"  >
	<div id="call-back" class="modal hide call-back">
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body">
      <form action="#" method="post" id="contact">
        <label for="name">Имя</label>
        <input type="text" id="name" name="name" class="txt">
        <br />
        <label for="phone">Телефон</label>
        <input type="text" id="phone" name="phone" value="+7" class="txt"/>
        <br>
        <label for="time">Удобное время звонка</label>
        <select name="time" id="time" class="txt">
          <option value="9:00 до 12:00">с&nbsp;09:00 до&nbsp;12:00</option>
          <option value="12:00 до 16:00">с&nbsp;12:00 до&nbsp;16:00</option>
          <option value="16:00 до 19:00">с&nbsp;16:00 до&nbsp;19:00</option>
          <option value="19:00 до 21:00">с&nbsp;19:00 до&nbsp;21:00</option>
          <option value="21:00 до 00:00">с&nbsp;21:00 до&nbsp;00:00</option>
        </select>
        <input type="submit" value="Заказать" id="send" />
      </form>
    </div>
  </div></div>


Все скрипты грузятся в шапке, видимо проблема из за этого? этот код находится в отдельном файле он загружается в шапке а если я оберну его в
$(document).ready(function()

оно же ждет пока DOM готовиться и только после исполняет его?

рони 04.07.2013 01:03

Цитата:

Сообщение от Hol1killer
$(document).ready

:yes:


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