Обращение к одной форме из разных мест

[olegshan]

Здравствуйте. Прошу помочь со следующей проблемой.

Есть скрытая контактная форма (display:none), которая становиться видимой и всплывает с помощью jQuery при нажатии кнопки "Заказать". На сайте несколько таких кнопок, все работает хорошо. Однако есть и несколько кнопок "Подробнее", при нажатии которых всплывает div, состоящий из двух div'ов - слева текстовое описание, а справа должна быть эта же форма. Важно, что бы там была именно та же самая форма, с тем же id и теми же name-атрибутами для полей - это нужно для верификации. Так вот, вопрос - как ее туда вызывать? Раньше я просто несколько раз прописывал в каждое такое окно новую форму, однако когда дошло до варификации с помощью jquery.validate оказалось, что этот плагин не рассчитан для работы с несколькими формами - заставить его, конечно, можно, однако нужно плясать с бубном, а я в jQuery пока не настолько силен.

Другими словами можно сказать, что при нажатии кнопки "Подробнее" должно происходить то же, что и при нажатии кнопки "Заказать" плюс еще вызывался дополнительный div с описанием.

Спасибо.

[mrnobody]

Сможете выложить HTML и JQ-код на http://jsfiddle.net/ ?

Можно форму "вырезать" с помощью метода .detach() и потом вставить в зависимости от ситуации с помощью методов .appendTo() / .prependTo() / .insertAfter() / .insertBefore().

Но лучше увидеть код, так сложно сказать.

[olegshan]

Попробовал выложить, но там почему то, передается только HTML-код, CSS и jQuery - нет. Поэтому лучше выложу здесь:

		 <!--Кнопка вызова окна с формой-->
<a href=#popupCenter class="Button" id="ButtonCen">
					 Заказать
</a>
	 <!--Всплывающее окно с формой-->
<div id="popupCenter">
		 <div class="popupPart">
			 <h4 id="popup"> Заказать</h4>
			 <form id="OrderCenter">
				 <input type="text" class="popupForm" name="name" placeholder="Ваше имя" required>
				 <input type="text" class="popupForm" name="email" placeholder="Ваш e-mail">
				 <input type="text" class="popupForm" name="phone" placeholder="Ваш телефон" required>
				 <textarea class="popupMassage" name="message" placeholder="Укажите, пожалуйста, ваши пожелания. В ближайшее время мы свяжемся с вами для обсуждения всех деталей." required></textarea>
				 <input type="submit" class="popupForm" id="ButtonCenter" value="Заказать">
				 </form>
		 </div>
	 </div>
<script>
		 $("#ButtonCen").fancybox({
		 'openEffect' : 'elastic',
		 'closeEffect' : 'elastic',
		 'onstart': function() { $("#popupCenter").css("display","block"); },		
		 'onClosed': function() { $("#popupCenter").css("display","none"); }
		 });
</script>

					 <!--Всплывающее окно с описанием и формой-->
<a id="showWindowOne" href="#popupOne">Подробнее</a>

<div id="popupOne">
			 <div class="popupPart">
				 <h4 id="popup">Заголовок</h4>
		 <p id="offerBoxUp">
			 Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание

		 </p>
		 </div>
		 <div class="popupPart">
			 <h4 id="popup"> Заказать</h4>
			 <form>
				 <!--Здесь должна быть та же форма-->

			 </form>
		 </div>

	 </div>

Вот jQ-код:

$(document).ready(function() {

    var form_holder_feedback =  '';


    $.validator.setDefaults({
submitHandler: function() {
	    var name = $('[name=name]').val();
	    var email = $('[name=email]').val();
	    var phone = $('[name=phone]').val();
	    var message = $('[name=message]').val();
	    var type = "Заказ";
	    $.ajax({
		    type: "POST",
		    url: "sendmail.php",
		    data: { name: name, email: email, phone: phone, message: message, type: type }
	    }).success(function(html) {
		    form_holder_feedback = html;
	    }).error(function() {
		    form_holder_feedback = '<p id="ok">Извините, произошла ошибка отправки формы</p>';
	    })
	    alert('Спасибо! Мы свяжемся с вами в ближайшее время.');

	    }
   });

    $('#OrderCenter').each(function () {
    $(this).validate();
    });
    });

Извините, код вырван из контекста, но надеюсь, что вы скожете по нему воссоздать картину.

Спасибо.

Edited September 25, 2013 by olegshan

[npofopr]

Выложу за вас. Раз так сложно разобраться в 4 колонках

http://jsfiddle.net/npofopr/Se2PV/

[olegshan]

спасибо. я так и делал, но когда открывал линк в другом браузере, видел только HTML-код, окна для JS и CSS были пусты.

[mrnobody]

Вот, каша только получилась (

http://jsfiddle.net/mrnobody/Se2PV/2/

[olegshan]

Спасибо большое! Буду разбираться)