Форум на Исходниках.RU https://forum.sources.ru Форум на Исходниках.RU Форум на Исходниках.RU https://forum.sources.ru/index.php?showtopic=413842&view=findpost&p=3784351 Mon, 03 Dec 2018 13:40:47 +0000 Invisible reCaptcha: с AJAX вызовом - бесконечный цикл https://forum.sources.ru/index.php?showtopic=413842&view=findpost&p=3784351 Теперь после заполнения каптчи получаю бесконечный цикл в районе 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 ();
    });
]]> Kuzma JavaScript, DOM/DHTML https://forum.sources.ru/index.php?showtopic=413842&view=findpost&p=3784281 Sun, 02 Dec 2018 09:18:22 +0000 Invisible reCaptcha: с AJAX вызовом - бесконечный цикл https://forum.sources.ru/index.php?showtopic=413842&view=findpost&p=3784281 Есть проблемы с 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".

Подскажите рабочее решение.]]> Kuzma JavaScript, DOM/DHTML