0

`

jQuery(document).ready(function($) {

	//E-mail Ajax Send
	$("form").submit(function() { //Change
		var formID = $(this).attr('id'); // Получение ID формы
        var formNm = $('#' + formID);
		$.ajax({
			type: "POST",
			url: "main.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Мы перезвоним Вам в течение 15 минут после отправки заявки. Если вы оставляете заявку не в рабочее время, мы свяжемся в Вами на следующий рабочий день.");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="my-5 mx-auto text-center">
    <h2 class="themestek-custom-heading">Рассчитайте стоимость уборки онлайн</h2>
    </div>
    <form  id="form1" method="POST">
        <div class="my-5 mx-auto text-center" style="width: 300px;">
            <div class="top-cover center-block form-group">
                <select class="form-control" id="rooms-count">
                    <option value="1690" name="1-к квартира"> 1-к квартира</option>
                    <option value="2190" name="2-к квартира"> 2-к квартира</option>
                    <option value="2690" name="3-к квартира"> 3-к квартира</option>
                    <option value="3290" name="4-к квартира"> 4-к квартира</option>
                 </select></div>
            <div class="form-group"> 
                <select class="form-control" id="bathRoomsCount">
                    <option value="0" name="1 санузел">1 санузел</option>
                    <option value="390" name="2 санузла">2 санузла</option> 
                </select></div>
            <div class="form-group"> 
                <button class="themestek-vc_general themestek-vc_btn3 themestek-vc_btn3-shape-square themestek-vc_btn3-style-flat themestek-vc_btn3-weight-yes themestek-vc_btn3-color-skincolor" id="js-calculator-start" data-toggle="modal" data-target="#feedbackFormModal"> Рассчитать стоимость </button>
            </div></div></form></div>


<div class="modal" id="feedbackFormModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-body">
    <form id="form2" action="main.php"  method="POST">
      <!-- Hidden Required Fields -->
		  <input type="hidden" name="project_name" value="clean.exete.ru">
		  <input type="hidden" name="admin_email" value="[email protected]">
		  <input type="hidden" name="form_subject" value="Заявка">
      <!-- END Hidden Required Fields -->
      
      <div class="calculator-overlay" id="js-calculator-window">
      <div class="calculator-window">
        <div class="close"></div>
        <div class="calculator-window-header">
          <h2>Онлайн калькулятор клининга</h2>
          <p>Вы можете добавить дополнительные услуги, отметив необходимые позиции в калькуляторе справа.</p>
        </div>
        <div class="messengeArea">
          <div class="calculator-window-body">
            <h4>По всей квартире</h4>
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                <h5>Входит в стоимость:</h5>
                <ul class="services-list">
                  <li> — Моем пол и протираем плинтусы <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Пылесосим ковры и коврики <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Протираем все доступные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Протираем выключатели и дверные ручки <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Чистим зеркала и стеклянные поверхности <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Собираем и выносим мусор <input type="hidden" class="js-calculator-standart-service" value=""></li>
                </ul>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6" >
                <h5>Дополнительно:</h5>
                <div class="custom-control custom-checkbox"> 
                <input type="checkbox" class="custom-control-input" id="cleaning-1" data-cleaning="1" name="Мытье окон"> 
                <label class="custom-control-label" for="cleaning-1">Мытье окон - 290р</label> 
                <span class="hidden" id="cleaning-label-1">Мытье окон - 290р</span>
                <input type="hidden" id="cleaning-price-1" class="form-control" value="290"></div>
                
                <div class="custom-control custom-checkbox"> 
                <input type="checkbox" class="custom-control-input" id="cleaning-2" data-cleaning="2" name="Уборка балкона"> 
                <label class="custom-control-label" for="cleaning-2">Уборка балкона - 600р</label> 
                <span class="hidden" id="cleaning-label-2">Уборка балкона - 600р</span>                  
                <input type="hidden" id="cleaning-price-2" class="form-control" value="600"></div>

                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-3" data-cleaning="3" name="Мытье люстры"> 
                  <label class="custom-control-label" for="cleaning-3">Мытье люстры - 500р</label> 
                  <span class="hidden" id="cleaning-label-3">Мытье люстры - 500р</span>                  
                  <input type="hidden" id="cleaning-price-3" class="form-control" value="500"></div>


                <div class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="cleaning-4" data-cleaning="4" name="Заберем ключи"> 
                  <label class="custom-control-label" for="cleaning-4">Заберем ключи - 300р</label> 
                  <span class="hidden" id="cleaning-label-4">Заберем ключи - 300р</span>                  
                  <input type="hidden" id="cleaning-price-4" class="form-control" value="300"></div>

                <div class="custom-control custom-checkbox"> 
                <input type="checkbox" class="custom-control-input" id="cleaning-5" data-cleaning="5" name="Доставим ключи"> 
                <label class="custom-control-label" for="cleaning-5">Доставим ключи - 300р</label> 
                <span class="hidden" id="cleaning-label-5">Доставим ключи - 300р</span>                 
                 <input type="hidden" id="cleaning-price-5" class="form-control" value="300"></div>
              </div>
            </div>
          </div>
          <div class="calculator-window-body">
            <h4>На кухне</h4>
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                <h5>Входит в стоимость:</h5>
                <ul class="services-list">
                  <li> — Моем раковину <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Протираем столешницу и кухонный фартук <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Моем снаружи плиту, холодильник и вытяжку <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Протираем фасады шкафов <input type="hidden" class="js-calculator-standart-service" value=""></li>
                </ul>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6" name="На кухне">
                <h5>Дополнительно:</h5>
                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-6" data-cleaning="6" name="Моем посуду"> 
                  <label class="custom-control-label" for="cleaning-6">Моем посуду - 300р</label> 
                  <span class="hidden" id="cleaning-label-6">Моем посуду - 300р</span>                  
                  <input type="hidden" id="cleaning-price-6" class="form-control" value="300"></div>

                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-7" data-cleaning="7" name="Почистим холодильник"> 
                  <label class="custom-control-label" for="cleaning-7">Почистим холодильник - 450р</label> 
                  <span class="hidden" id="cleaning-label-7">Почистим холодильник - 450р</span>                  
                  <input type="hidden" id="cleaning-price-7" class="form-control" value="450"></div>

                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-8" data-cleaning="8" name="Помоем духовку"> 
                  <label class="custom-control-label" for="cleaning-8">Помоем духовку - 400р</label> 
                  <span class="hidden" id="cleaning-label-8">Помоем духовку - 400р</span>                  
                  <input type="hidden" id="cleaning-price-8" class="form-control" value="400"></div>

                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-9" data-cleaning="9" name="Помоем микроволновку"> 
                  <label class="custom-control-label" for="cleaning-9">Помоем микроволновку - 250р</label> 
                  <span class="hidden" id="cleaning-label-9">Помоем микроволновку - 250р</span>                  
                  <input type="hidden" id="cleaning-price-9" class="form-control" value="250"></div>

                <div class="custom-control custom-checkbox"> 
                  <input type="checkbox" class="custom-control-input" id="cleaning-10" data-cleaning="10" name="Приберём кухонные шкафы"> 
                  <label class="custom-control-label" for="cleaning-10">Приберём кухонные шкафы - 690р</label> 
                  <span class="hidden" id="cleaning-label-10">Приберём кухонные шкафы - 690р</span>                  
                  <input type="hidden" id="cleaning-price-10" class="form-control" value="690"></div>
              </div>
            </div>
          </div>
          <div class="calculator-window-body">
            <h4>В ванной</h4>
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                <h5>Входит в стоимость:</h5>
                <ul class="services-list">
                  <li> — Чистим унитаз <input type="hidden" class="js-calculator-standart-service" value=""></li>
                  <li> — Моем ванну, душевую кабину и раковину <input type="hidden" class="js-calculator-standart-service" value=""></li>
                </ul>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6" name="В ванной">
                <h5>Дополнительно:</h5>
                <div class="custom-control custom-checkbox"> 
                <input type="checkbox" class="custom-control-input" id="cleaning-11" data-cleaning="11" name="Помоем лоток питомца"> 
                <label class="custom-control-label" for="cleaning-11">Помоем лоток питомца - 300р</label> 
                <span class="hidden" id="cleaning-label-11">Помоем лоток питомца - 300р</span>                  
                <input type="hidden" id="cleaning-price-11" class="form-control" value="300"></div>
              </div>
            </div>
          </div>
          <div class="calculator-footer" name="Базовая стоимость">
            <div class="row">
              <div class="col-4">
                <p>Базовая стоимость:<br><big id="js-base-price">0</big>руб</p>
              </div>
              <div class="col-4">
                <p>За доп. услуги:<br><big id="js-additional-price" name="За доп. услуги:">0</big>руб</p>
              </div>
              <div class="col-4">
                <p>Итого:<br><big id="js-final-price" name="Итого:">1690</big>руб</p>
              </div>
            </div>
          </div>
        </div>
        <div class="calculator-order">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">
              <div class="form-group">
                <p>Ваше имя:</p> <input type="text" name="ФИО" placeholder="Ваше имя" class="form-control" id="js-calculator-name"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
              <div class="form-group">
                <p>Номер телефона:</p> <input type="text" name="Телефон" placeholder="+7(___)___-__-__" class="form-control js-phone" id="js-calculator-phone"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
              <div class="form-group">
                <p>Удобное время для звонка:</p>
                <select class="form-control" id="js-calculator-time" name="Удобное время для звонка" style="width: 150px;">
                  <option value="Как можно скорее">Как можно скорее</option>
                  <option value="09:00-11:00">09:00-11:00</option>
                  <option value="11:00-13:00">11:00-13:00</option>
                  <option value="13:00-15:00">13:00-15:00</option>
                  <option value="15:00-17:00">15:00-17:00</option>
                  <option value="17:00-19:00">17:00-19:00</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4"> <button class="btn btn-block btn-send" id="js-send-calculator-data"> Оставить заявку </button></div>
            </form>
            <div class="col-lg-8 col-md-8 col-sm-8">
              <p>Мы перезвоним Вам в течение часа после отправки заявки. Если вы оставляете заявку не в рабочее время, мы свяжемся в Вами на следующий рабочий день.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>

</body>

`Есть всплывающая форма состоит из 2ух частей

введите сюда описание изображения введите сюда описание изображения

Как сделать так что бы данные отправлялись с двух форм?

1
  • Можно передать данные из одной формы в другую, и высылать все данные со второй формы
    – Alpha
    18 авг 2019 в 8:48

1 ответ 1

0

Вариант первый:

Можно попробовать создать третью скрытую форму, которая будет сериализовать поля из обоих.

<form name="form1" method="post">
.........
</form>

<form name="form2" method="post">
.........
</form>

На jQuery:

var str1 = $("form1").serialize();
var str2 = $("form2").serialize();
$.post(url, str1 + "&" + str2);

Вариант второй:

Через ajax (у каждой формы свой id):

<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function () {
            var formID = $(this).attr('id'); // Получение ID формы
            var formNm = $('#' + formID);
            $.ajax({
                type: 'POST',
                url: 'mail.php', // Обработчик формы отправки
                data: formNm.serialize(),
                success: function (data) {
                    // Вывод текста результата отправки в текущей форме
                    $(formNm).html(data);
                }
            });
            return false;
        });
    });
</script> 
2
  • Выбрал второй вариант, окно сразу закрывается, код выше
    – fermeg
    20 авг 2019 в 9:52
  • Да, хорошо - второй вариант оптимальней, думается.
    – Coder
    20 авг 2019 в 10:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.