Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.137.180.32] |
|
Сообщ.
#1
,
|
|
|
Добрый день!
Есть проблемы с AJAX вызовом и невилимой reCaptcha. Код: index.html //header <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://google.com/recaptcha/api.js?onload=initRecaptcha&render=explicit"></script> //форма <form enctype="multipart/form-data" method="POST" id="myForm" class="callback"> <div class="inputs"> <label class="input input-name required"> <span class="placeholder">Name</span> <input type="text" name="name"> </label> <label class="input input-phone required"> <span class="placeholder">Phone</span> <input type="text" name="phone" maxlength="12"> </label> <label class="input input-mail"> <span class="placeholder">Email</span> <input type="text" name="email"> </label> </div> <div class="check"> <label> <input class="check-agree" type="checkbox" name="agree" checked="checked" value="1"> <span class="label">I agree <span class="agree-text js-agree-text">with terms and conditions</span></span> </label> <div id="status"></div> </div> <div class="submit-wrapper"> <label class="submit"> <input class="submit-form-button js-submit-form" type="submit" value="Submit"> </label> </div> <div id="form-recaptch"></div> </form> //конец <script type="text/javascript" src="js/form.js"></script> form.js, тут находится и валидация формы. Возможно её вызов "гасит" каптчу var submit_form_outer; var initRecaptcha = function(){ if ( document.getElementById("form-recaptch") ) { recaptcha = grecaptcha.render("form-recaptch", { 'sitekey' : 'code', 'theme' : 'dark', 'badge' : 'inline', 'size' : 'invisible', 'callback' : submit_form_outer }); } } $(function () { $('.callback').submit(function (e) { submit_form($(this)); e.preventDefault(); /*stop refresh*/ grecaptcha.execute(); e.stopPropagation(); }); /*More Functions*/ function validateEmail(form) { var email = form.find('[name="email"]'); var re = /.+@.+\..+/g; if( re.test(email.val()) || email.val() === ""){ return true; } else { email.closest('.input').addClass('error'); return false; } } function hasErrors (form) { var required = form.find('.required'); var has_errors = false; required.each(function(){ if(!$(this).find('input').val()){ $(this).addClass('error'); has_errors = true; } }); return has_errors; } function submit_form() { if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){ return false; } var container = $("#form-recaptch").parents("form"); $.ajax({ method: "POST", url: "ajax.php", data: container.serialize(), success: function (responseObj, textStatus, xhr) { alert(xhr.status); console.log(xhr.status); if(xhr.status === '200'){ console.log('200'); container.submit(); $('#myForm input').val(''); $('#myForm textarea').val(''); $('#status').html(responseObj); } else{ console.log('error'); console.log(xhr); alert('error'); grecaptcha.reset(); } }, error: function (xhr, error) { console.debug(xhr); console.debug(error); $("#status").html("Failed."); grecaptcha.reset(); }, }); } submit_form_outer = submit_form; function Form () { /*...*/ /*More Functions*/ $('.form').on('click', '.js-agree-text', function () { showAgreeBox(); openFormPanel(); return false; }); $('.form').on('click', '.js-no-agree', function () { agreeNo(); return false; }); $('.form').on('click', '.js-yes-agree', function () { agreeYes(); return false; }); $('.check-agree').change(function() { var form = $(this).closest('.form'); if($(this).is(":checked")) { form.find('.js-submit-form').removeClass('disabled'); } else { form.find('.js-submit-form').addClass('disabled'); } } /*More Functions*/ this.callback = function () { showThankBox(); openFormPanel(); $.fn.fullpage.setAllowScrolling(false); } } var mainform = new Form (); }); ajax.php, из-за этих внесённых изменений в form.js: if(xhr.status === '200'){ xxx } else {} до него очередь уже не доходит. Там собственно находится проверка каптчи на сервере. Самое странное, что здесь: if(xhr.status === '200'){ console.log('200'); container.submit(); $('#myForm input').val(''); $('#myForm textarea').val(''); $('#status').html(responseObj); } else{ console.log('error'); console.log(xhr); alert('error'); grecaptcha.reset(); } я получаю два ответа: как "200", так и "error". Подскажите рабочее решение. |
Сообщ.
#2
,
|
|
|
Ещё долго просидел с этим делом.
Теперь после заполнения каптчи получаю бесконечный цикл в районе success: function var submit_form_outer; var initRecaptcha = function(){ if ( document.getElementById("form-recaptcha") ) { recaptcha = grecaptcha.render("form-recaptcha", { 'sitekey' : '', 'theme' : 'dark', 'type' : 'image', 'badge' : 'inline', 'size' : 'invisible', 'callback' : submit_form_outer }); } } $(function () { submit_form_outer = submit_form; $('.callback').submit(function (e) { submit_form($(this)); e.preventDefault(); /*stop refresh*/ /* e.stopPropagation();*/ }); var phone = $('[name="phone"]'), input = $('input[type="text"], textarea'); phone.click(function () { $(this).parent().removeClass('error'); if ($(this).val().length == 0) { $(this).val('+'); } }); phone.focusout(function () { if ($(this).val().length < 2) { $(this).val(''); } }); phone.bind("change keyup input click", function() { if (this.value.match(/[^0-9+ ]/g)) { this.value = this.value.replace(/[^0-9+ ]/g, ''); } }); input.focus(function () { $(this).parent().removeClass('error'); $(this).parent().find('span').addClass('focused'); }); input.focusout(function(){ if ($(this).val() == ''){ $(this).parent().find('span').removeClass('focused'); } }); function validateEmail(form) { var email = form.find('[name="email"]'); var re = /.+@.+\..+/g; if( re.test(email.val()) || email.val() === ""){ return true; } else { email.closest('.input').addClass('error'); return false; } } function hasErrors (form) { var required = form.find('.required'); var has_errors = false; required.each(function(){ if(!$(this).find('input').val()){ $(this).addClass('error'); has_errors = true; } }); return has_errors; } function submit_form() { if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){ return false; } var container = $("#form-recaptcha").parents("form"); $.ajax({ method: "POST", url: "ajax.php", data: container.serialize(), success: function (responseObj, textStatus, xhr) { console.log('success'); console.log(responseObj); container.submit(); $('#myForm textarea').val(''); $('#status').html(responseObj); /*if(xhr.status === '200'){ $("#status").html('200'); } else{ console.log('else'); grecaptcha.reset(); }*/ }, error: function (xhr, error) { console.log('error'); console.debug(error); console.debug(xhr); $("#status").html("Failed."); grecaptcha.reset(); }, }); grecaptcha.reset(); } function Form () { function openFormPanel () { $('body').addClass('form-panel-opened form-panel-close-callback'); $.fn.fullpage.setAllowScrolling(false); } function closeFormPanel () { $('body').removeClass('form-panel-opened'); $('.button-menu').removeClass('active'); window.setTimeout(function () { $('body').removeClass('form-panel-close-callback'); $.fn.fullpage.setAllowScrolling(true); }, 700); } function showAgreeBox () { $('.form .agreement-box').addClass('show'); $('.form .thank-box').removeClass('show'); $('.agreement .scrollable').scrollTop(0); } function showFormBox () { $('.form .agreement-box').removeClass('show'); $('.form .thank-box').removeClass('show'); } function showThankBox () { $('.form .agreement-box').removeClass('show'); $('.form .thank-box').addClass('show'); } function agreeYes(){ if($('body').hasClass('fp-viewing-2')){ closeFormPanel(); } else { showFormBox(); } $('.js-submit-form').removeClass('disabled'); $('.check-agree').prop('checked', true); } function agreeNo(){ if($('body').hasClass('fp-viewing-2')){ closeFormPanel(); } else { showFormBox(); } $('.js-submit-form').addClass('disabled'); $('.check-agree').prop('checked', false); } $('.form').on('click', '.js-agree-text', function () { showAgreeBox(); openFormPanel(); return false; }); $('.form').on('click', '.js-no-agree', function () { agreeNo(); return false; }); $('.form').on('click', '.js-yes-agree', function () { agreeYes(); return false; }); $('.check-agree').change(function() { var form = $(this).closest('.form'); if($(this).is(":checked")) { form.find('.js-submit-form').removeClass('disabled'); } else { form.find('.js-submit-form').addClass('disabled'); } }).mouseover(function () { $(this).addClass('hover'); }).mouseout(function () { $(this).removeClass('hover'); }); $('.form').on('click', '.js-submit-form', function () { var form = $(this).closest('.form'); var agree = form.find('.check-agree').prop('checked'); if(!agree) return false; }); $('.form').on('click', function () { if ( grecaptcha.getResponse() !== 0 ) { grecaptcha.execute(); } }); function resetForm () { $('.form input[type="text"], .form textarea').each(function () { $(this).val(''); }); $('.form .placeholder').removeClass('focused'); } this.callback = function () { showThankBox(); openFormPanel(); $.fn.fullpage.setAllowScrolling(false); } } var mainform = new Form (); }); |