var onSuccess работает в файле HTML, но не в файле .js - PullRequest
Новая
       11

var onSuccess работает в файле HTML, но не в файле .js

0 голосов
/ 16 октября 2018

Я внедряю Google Invisible Recaptcha и пытаюсь запустить все из моего файла mail.js (и я действительно предпочел бы сохранить его там).По какой-то причине Recaptcha не находит «onSuccess» в mail.js, но если я перемещаю его в HTML-код внутри <script></script>, он работает.

Я получаю эту ошибку в консоли JavaScript: ReCAPTCHA couldn't find user-provided function: onSuccess, когда этов mail.js 

$(".input-field").each(function () {
    var $this = $(this);
    if ($this.val().length) {
        $this.parent().addClass("input--filled")
    }
    $this.on("focus", function () {
        $this.parent().addClass("input--filled");
    });
    $this.on("blur", function () {
        if (!$this.val().length) {
            $this.parent().removeClass("input--filled")
        }
    })
});


$(function () {

    // Get the form.
    var form = $('#ajax-contact'),
        // Get the messages div.
        formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function (e) {
        // Stop the browser from submitting the form.
        grecaptcha.execute();
        e.preventDefault();
    });

});


var onSuccess = function(response) {
         $("#btn-submit").addClass("btn-loading");


        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: formData
            })
            .done(function (response) {
                // Make sure that the formMessages div has the 'success' class.
                $(formMessages).removeClass('error').addClass('success').fadeIn().delay(5000).fadeOut();
                // Set the message text.
                $(formMessages).text(response);

                // Clear the form.
                $(form).trigger("reset");
                grecaptcha.reset();
                $("#btn-submit").removeClass("btn-loading");
            })
            .fail(function (data) {
                // Make sure that the formMessages div has the 'error' class.
                $(formMessages).removeClass('success').addClass('error').fadeIn().delay(5000).fadeOut();
                // Set the message text.
                if (data.responseText !== '') {
                    $(formMessages).text(data.responseText);
                } else {
                    $(formMessages).text('Oops! An error occured and your message could not be sent.');
                }


                $("#btn-submit").removeClass("btn-loading");
            });
       };

вот HTML: 

<form id="ajax-contact" class="" method="post" action="mailer.php">
<fieldset>
    <div class="row">
        <div class="input col-xs-12 col-sm-12 padding-bottom-xs-50 padding-bottom-40">
            <label class="input-label" for="name">
                <span class="input-label-content font-second" data-content="name">name *</span>
            </label>
            <input class="input-field" type="text" name="name" id="name" required />
        </div>
        <div class="input col-xs-12 col-sm-6 padding-bottom-xs-50 padding-bottom-50">
            <label class="input-label" for="email">
                <span class="input-label-content font-second" data-content="email">email *</span>
            </label>
            <input class="input-field" type="email" name="email" id="email" required />
        </div>
        <div class="input col-xs-12 col-sm-6 padding-bottom-xs-60 padding-bottom-50">
            <label class="input-label" for="company">
                <span class="input-label-content font-second" data-content="company">company</span>
            </label>
            <input class="input-field" type="text" name="company" id="company" />
        </div>
        <div class="message col-xs-12 col-sm-12 padding-bottom-xs-40 padding-bottom-30">
            <label class="textarea-label font-second" for="message">message *</label>
            <textarea class="input-field textarea" name="message" id="message" required></textarea>
        </div>
    </div>
    <div class="g-recaptcha" data-sitekey="6Lf-6XQUAAAAAGhsZxXTlA3MtMGr_xDhOXPG-Ds0" data-badge="inline" data-size="invisible" data-callback="onSuccess"></div>
    <div id="form-messages" class="form-message"></div>
    <div class="col-xs-12 margin-top-30 text-center">
        <button id="btn-submit" type="submit" class="btn btn-animated btn-contact ripple-alone" data-text="send it"><span class="btn-icon"><span class="loader-parent"><span class="loader3"></span></span>
            </span>
        </button>
    </div>
</fieldset>

...