функция 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 отправить и вторую форму, то почему то отправится первая, соответственно с пустыми данными...Как избежать такой ситуации? |
А зачем два обработчика?
|
Т.к у каждой формы свои поля нужно проверять. Чтобы громоский обработчик не писать, решил на каждую форму свой. А моя проблема из за нескольких обработчиков?
|
Цитата:
|
Вообще форм гораздо больше, и был выбран общий принцип для всех, для этих двух действительно можно обойтись одним обработчиком, но это разве решит мою проблему?
|
Вставлю свои 5 копеек:
У автора у каждой формы установлен обработчик события «Submit» через атрибут. После того как на любой из форм будет вызвано названное событие, должна осуществиться некая валидация данных и, в случае успешного прохождения этой валидации, будет отправлен запрос на сервер гугла для проверки корректности капчи. Если каптча введена верно, то на этой форме снова будет вызвано событие «Submit». Infinite recursion, я правильно понял? |
Nexus, да все верно
|
После успешного ответа гугл вызываются как раз эти функции
function resultRecapcha(){document.querySelector("#fast-feedback").submit();} function resultRecapcha2(){document.querySelector(".feedback-header").submit();} |
loony, Почему данные с формы отправляются на сервер?
Стандартное поведение формы при сабмите не воспроизводится? |
Я тут подумал... а какой вообще смысл в reCaptcha, если её "валидацию" проверят клиент?
Если я отключу js на странице и отправлю форму на сервер, сервер в свою очередь будет проверять верна ли капча? Если сервер не проверяет капчу, то и смысла в ней нет) |
это чудо invisible recaptcha. Это уже другой вопрос. Как мне в такой ситуация избежать проблемы, которую я озвучил?
|
Цитата:
|
Цитата:
Понимаешь разницу?)) |
Цитата:
|
На примере одной формы все корректно работает, а вот если подключаю вторую форму по такому же принцепу, то возникает проблема, которую описал. Например отправил я такой с первой формы, и сразу со второй отправляю и заявка падает от первой и пустая, но логично мы же ее не заполняли...
|
Полюбому проблема не нова, при отправке с двух форм на странице, $_POST формирует от одной, первой.
|
Цитата:
|
А почему 2, если срабатывает, например callback="resultRecapcha2", то будет отправка
function resultRecapcha2(){document.querySelector(".feedback-header").submit();} |
loony, разместить на странице 2 отдельные формы, потом быстро нажать на submit обоих форм и получить на сервере данные сразу от двух запросов так не получится.
Либо затолкай все данные в одну форму, либо собирай данные с обоих форм скриптом и отправляй их на сервер также скриптом. |
Цитата:
|
Цитата:
А о том, что сервер обязан проверять все входящие данные многие либо не знают, либо просто игнорируют это. |
Nexus,
вы вольны трактовать смысл написанного как вам вздумается, я же понял так, как понял, и не надо меня убеждать в обратном. ) |
Цитата:
function resultRecapcha2(){document.querySelector(".feedbac k-header").submit();} и отправилась форма .feedback-header. Такой вариант разве не сработает? |
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. |