Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   функция submit от разных форм отправляет всегд одну (https://javascript.ru/forum/dom-window/70104-funkciya-submit-ot-raznykh-form-otpravlyaet-vsegd-odnu.html)

loony 10.08.2017 14:50

функция submit от разных форм отправляет всегд одну
 
Помогите разобраться где косяк.

НА странице 2 формы

<form id="fast-feedback" action="" method="post" onsubmit="return onSubmit()">
	<input type="hidden" value="0" id="form_checked_q" name="email">
	<input type="hidden" value="" name="fast-feedback">
	<div class="head">Быстрая заявка</div>
	<div class="row-order">
		<div class="inp-name">Контактный телефон:</div>
		<div class="inp-cont"><input class="quick_inp" type="text" name="tel" required=""></div>
	</div>
	<div class="row-order">
		<div class="inp-name">Адрес сайта:</div>
		<div class="inp-cont"><input class="quick_inp" type="text" name="url"></div>
	</div>
	<div class="row-order">
		<div class="wrap-confid"><input type="checkbox" checked=""><a href="/confidential.pdf" target="_blank">Я согласен с условиями конфиденциальности </a></div>
<div style="display:none;" class="g-recaptcha" data-sitekey="6LfEuSIUAAAAAOEwmLGKzTgGg4Pr1K19OFPBQFTD" data-callback="resultRecapcha" data-size="invisible"></div>
<input type="submit" name="quick_form11" onclick="yaCounter1967302.reachGoal('goal2'); return true;" value="Отправить заявку">
	</div>
</form>

<form action="" method="post" class="feedback-header" onsubmit="return onSubmit2()">
	<div class="row">
		<div class="col-xs-6">
			<div class="inp-name">Ваше Имя*:</div>
			<input type="text" id="acpro_inp1" name="name" required="">
			<div class="inp-name">Телефон:*</div>
			<input type="text" id="acpro_inp2" name="phone" required="">
		</div>
		<div class="col-xs-6">
			<div class="inp-name">Адрес сайта:</div>
			<input type="text" id="acpro_inp4" name="url">
		</div>
	</div>
	<p class="in-z">* – Обязательно заполните поля, отмеченные «звёздочкой»</p>
	<div class="wrap-confid"><input type="checkbox" checked=""><a href="/confidential.pdf" target="_blank">Я согласен с условиями конфиденциальности </a></div>
<div style="display:none;" class="g-recaptcha" data-sitekey="6LfEuSIUAAAAAOEwmLGKzTgGg4Pr1K19OFPBQFTD" data-callback="resultRecapcha2" data-size="invisible"></div>
	<input type="submit" name="but_return" value="Отправить заявку">

</form>


Вот функции:
// Проверка быстрая заявка
  function onSubmit() {
      var x = document.querySelector("input[name='tel']").value;
      if(x == ""){
      }else{grecaptcha.execute();}
      return false;
  }
  // Проверка обратный звонок
  function onSubmit2() {
      var x = document.querySelector("input[name='name']").value;
      var y = document.querySelector("input[name='phone']").value;
      if(x == "" || y == ""){
      }else{grecaptcha.execute();}
      return false;
  }


grecaptcha.execute(); - вызывает гугл капчу, если с капчей все ок, то идет вызов функции resultRecapcha и resultRecapcha2

Вот эти функции:
function resultRecapcha(){document.querySelector("#fast-feedback").submit();}
  function resultRecapcha2(){document.querySelector(".feedback-header").submit();}


А теперь сама проблема:

Заполняем первую форму, жмем кнопку "Отправить заявку", форма отправиться с перезагрузкой страницы, как бы на странице будет сформированный $_POST, если не сбрасывая $_POST отправить и вторую форму, то почему то отправится первая, соответственно с пустыми данными...Как избежать такой ситуации?

laimas 10.08.2017 15:03

А зачем два обработчика?

loony 10.08.2017 15:08

Т.к у каждой формы свои поля нужно проверять. Чтобы громоский обработчик не писать, решил на каждую форму свой. А моя проблема из за нескольких обработчиков?

laimas 10.08.2017 15:17

Цитата:

Сообщение от loony
Т.к у каждой формы свои поля нужно проверять.

Не видно большой разницы в полях формы.

loony 10.08.2017 15:26

Вообще форм гораздо больше, и был выбран общий принцип для всех, для этих двух действительно можно обойтись одним обработчиком, но это разве решит мою проблему?

Nexus 10.08.2017 15:54

Вставлю свои 5 копеек:
У автора у каждой формы установлен обработчик события «Submit» через атрибут.
После того как на любой из форм будет вызвано названное событие, должна осуществиться некая валидация данных и, в случае успешного прохождения этой валидации, будет отправлен запрос на сервер гугла для проверки корректности капчи.
Если каптча введена верно, то на этой форме снова будет вызвано событие «Submit».

Infinite recursion, я правильно понял?

loony 10.08.2017 16:11

Nexus, да все верно

loony 10.08.2017 16:21

После успешного ответа гугл вызываются как раз эти функции

function resultRecapcha(){document.querySelector("#fast-feedback").submit();}
  function resultRecapcha2(){document.querySelector(".feedback-header").submit();}

Nexus 10.08.2017 16:45

loony, Почему данные с формы отправляются на сервер?
Стандартное поведение формы при сабмите не воспроизводится?

Nexus 10.08.2017 16:51

Я тут подумал... а какой вообще смысл в reCaptcha, если её "валидацию" проверят клиент?
Если я отключу js на странице и отправлю форму на сервер, сервер в свою очередь будет проверять верна ли капча?
Если сервер не проверяет капчу, то и смысла в ней нет)

loony 10.08.2017 17:15

это чудо invisible recaptcha. Это уже другой вопрос. Как мне в такой ситуация избежать проблемы, которую я озвучил?

laimas 10.08.2017 17:28

Цитата:

Сообщение от Nexus
Если я отключу js на странице и отправлю форму на сервер, сервер в свою очередь будет проверять верна ли капча?

Да, если будет использоваться серверный API.

Nexus 10.08.2017 17:35

Цитата:

Сообщение от laimas (Сообщение 461269)
Да, если будет использоваться серверный API.

Суть вопроса в другом была) Не "можно ли проверить", а "проверяется ли".
Понимаешь разницу?))

Nexus 10.08.2017 17:37

Цитата:

Сообщение от loony (Сообщение 461266)
это чудо invisible recaptcha. Это уже другой вопрос. Как мне в такой ситуация избежать проблемы, которую я озвучил?

Я бы на твоем месте сначала проверил корректно ли навешаны обработчики, а дальше и проблема решилась бы сама собой)

loony 10.08.2017 17:54

На примере одной формы все корректно работает, а вот если подключаю вторую форму по такому же принцепу, то возникает проблема, которую описал. Например отправил я такой с первой формы, и сразу со второй отправляю и заявка падает от первой и пустая, но логично мы же ее не заполняли...

loony 10.08.2017 17:55

Полюбому проблема не нова, при отправке с двух форм на странице, $_POST формирует от одной, первой.

Nexus 10.08.2017 17:57

Цитата:

Сообщение от loony (Сообщение 461280)
На примере одной формы все корректно работает, а вот если подключаю вторую форму по такому же принцепу, то возникает проблема, которую описал. Например отправил я такой с первой формы, и сразу со второй отправляю и заявка падает от первой и пустая, но логично мы же ее не заполняли...

Ты пытаешь сразу отправить 2 формы и удивляешься тому, что отправляется только первая?))

loony 10.08.2017 18:17

А почему 2, если срабатывает, например callback="resultRecapcha2", то будет отправка
function resultRecapcha2(){document.querySelector(".feedback-header").submit();}

Nexus 10.08.2017 19:02

loony, разместить на странице 2 отдельные формы, потом быстро нажать на submit обоих форм и получить на сервере данные сразу от двух запросов так не получится.
Либо затолкай все данные в одну форму, либо собирай данные с обоих форм скриптом и отправляй их на сервер также скриптом.

laimas 10.08.2017 19:48

Цитата:

Сообщение от Nexus
Суть вопроса в другом была)

Суть вопроса была "отключить JS и сервер будет ли", в чем тут не соответствие? Если принять во внимание, что сервер обязан проверять данные извне, то не так и важно, что сервер и каптчу проверит.

Nexus 10.08.2017 20:25

Цитата:

Сообщение от laimas (Сообщение 461297)
Суть вопроса была "отключить JS и сервер будет ли", в чем тут не соответствие?

В 13-м посте есть ответ на этот вопрос.
А о том, что сервер обязан проверять все входящие данные многие либо не знают, либо просто игнорируют это.

laimas 10.08.2017 20:29

Nexus,
вы вольны трактовать смысл написанного как вам вздумается, я же понял так, как понял, и не надо меня убеждать в обратном. )

loony 10.08.2017 21:29

Цитата:

Сообщение от Nexus (Сообщение 461291)
loony, разместить на странице 2 отдельные формы, потом быстро нажать на submit обоих форм и получить на сервере данные сразу от двух запросов так не получится.
Либо затолкай все данные в одну форму, либо собирай данные с обоих форм скриптом и отправляй их на сервер также скриптом.

Я так и не понял, почему нельзя по одной отправлять зачем сразу две. Пришел ответ на функцию resultRecapcha2 и сработало
function resultRecapcha2(){document.querySelector(".feedbac k-header").submit();}
и отправилась форма .feedback-header. Такой вариант разве не сработает?

Nexus 10.08.2017 22:49

loony, сделал макет твой странички, все работает как ожидается:
<html>
<head></head>
<body>
<textarea><?php var_dump($_POST);?></textarea>
<form id="fast-feedback" action="" method="post" onsubmit="return onSubmit()">
	<input type="hidden" value="0" id="form_checked_q" name="email">
	<input type="hidden" value="" name="fast-feedback">
	<div class="head">Быстрая заявка</div>
	<div class="row-order">
		<div class="inp-name">Контактный телефон:</div>
		<div class="inp-cont"><input class="quick_inp" type="text" name="tel" value="1234567890" required=""></div>
	</div>
	<div class="row-order">
		<div class="inp-name">Адрес сайта:</div>
		<div class="inp-cont"><input class="quick_inp" type="text" name="url"></div>
	</div>
	<div class="row-order">
		<div class="wrap-confid"><input type="checkbox" checked=""><a href="/confidential.pdf" target="_blank">Я согласен с условиями конфиденциальности </a></div>
		<input type="submit" name="quick_form11" onclick="return true;" value="Отправить заявку">
	</div>
</form>

<form action="" method="post" class="feedback-header" onsubmit="return onSubmit2()">
	<div class="row">
		<div class="col-xs-6">
			<div class="inp-name">Ваше Имя*:</div>
			<input type="text" id="acpro_inp1" name="name" value="asd" required="">
			<div class="inp-name">Телефон:*</div>
			<input type="text" id="acpro_inp2" value="1664478151" name="phone" required="">
		</div>
		<div class="col-xs-6">
			<div class="inp-name">Адрес сайта:</div>
			<input type="text" id="acpro_inp4" name="url">
		</div>
	</div>
	<p class="in-z">* – Обязательно заполните поля, отмеченные «звёздочкой»</p>
	<div class="wrap-confid"><input type="checkbox" checked=""><a href="/confidential.pdf" target="_blank">Я согласен с условиями конфиденциальности </a></div>
	<input type="submit" name="but_return" value="Отправить заявку">

</form>


<script>
// Проверка быстрая заявка
function onSubmit() {
	var x = document.querySelector("input[name='tel']").value;
	if(x == ""){
	}else{pseudo_captcha('#fast-feedback');}
	return false;
}
// Проверка обратный звонок
function onSubmit2() {
	var x = document.querySelector("input[name='name']").value;
	var y = document.querySelector("input[name='phone']").value;
	if(x == "" || y == ""){
	}else{pseudo_captcha('.feedback-header');}
	return false;
}

function pseudo_captcha(form_selector){
	setTimeout(function(){
		document.querySelector(form_selector).submit();
	},1500);
}
</script>

</body>
</html>


Скорее всего скрипт гугла использует только настройки первой капчи.
Попробуй инициализировать капчи не через тег, а скриптом.
grecaptcha.render('CONTAINER',{
	sitekey:'SITE_KEY'
});


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