Как предотвратить открытие формы на новой странице? - PullRequest
0 голосов
/ 17 апреля 2020

Я работаю над интеграцией ReCaptcha v2 на мою страницу, но код, который предлагает Google, открывает отклик ajax на новой странице. Вот мой код:

<form id="quoteForm" class="contact-form" action="php/testingv2.php" method="POST">
    <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
        <strong>Thank you!</strong> We contact you shortly with your quote!
    </div>
        <div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
        <strong>Error!</strong> There was an error processing your quote.
        <span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    </div>

    <div class="form-row">
        <div class="form-group col-lg-6">
            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="quotename" id="quotename" placeholder="Your Name" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col">
        <!--<label class="required font-weight-bold text-dark text-2">Message</label>-->
        <textarea maxlength="5000" placeholder="Additional Comments" rows="2" class="form-control" name="addcomments" id="addcomments"></textarea>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col text-center">

            <input type="submit" value="SUBMIT" class="btn btn-dark px-4 py-3 g-recaptcha" data-sitekey="xxxx" data-callback='onSubmit' data-loading-text="Loading...">
        </div>
    </div>
</form>

(function($) {
        function onSubmit(token) {
    gtag_report_conversion()
             document.getElementById("quoteForm").submit();
    }

        $('.contact-form').each(function(){
            $(this).validate({
                submitHandler: function(form) {

                    var $form = $(form),
                        $messageSuccess = $form.find('.contact-form-success'),
                        $messageError = $form.find('.contact-form-error'),
                        $submitButton = $(this.submitButton),
                        $errorMessage = $form.find('.mail-error-message'),
                        submitButtonText = $submitButton.val();

                    $submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);

                    // Fields Data
                    var formData = $form.serializeArray(),
                        data = {};

                    $(formData).each(function(index, obj){
                        data[obj.name] = obj.value;
                    });

                    // Google Recaptcha v2
                    if( data["g-recaptcha-response"] != undefined ) {
                        data["g-recaptcha-response"] = $form.find('#g-recaptcha-response').val();
                    }

                    // Ajax Submit
                    $.ajax({
                        type: 'POST',
                        url: $form.attr('action'),
                        data: data
                    }).always(function(data, textStatus, jqXHR) {

                        $errorMessage.empty().hide();

                        if (data.response == 'success') {

                            // Uncomment the code below to redirect for a thank you page
                            // self.location = 'thank-you.html';

                            $messageSuccess.removeClass('d-none');
                            $messageError.addClass('d-none');

                            // Reset Form
                            $form.find('.form-control')
                                .val('')
                                .blur()
                                .parent()
                                .removeClass('has-success')
                                .removeClass('has-danger')
                                .find('label.error')
                                .remove();

                            if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
                                $('html, body').animate({
                                    scrollTop: $messageSuccess.offset().top - 80
                                }, 300);
                            }

                            $form.find('.form-control').removeClass('error');

                            $submitButton.val( submitButtonText ).attr('disabled', false);

                            return;

                        } else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
                            $errorMessage.html(data.errorMessage).show();
                        } else {
                            $errorMessage.html(data.responseText).show();
                        }

                        $messageError.removeClass('d-none');
                        $messageSuccess.addClass('d-none');

                        if (($messageError.offset().top - 80) < $(window).scrollTop()) {
                            $('html, body').animate({
                                scrollTop: $messageError.offset().top - 80
                            }, 300);
                        }

                        $form.find('.has-success')
                            .removeClass('has-success');

                        $submitButton.val( submitButtonText ).attr('disabled', false);

                    });
                }
            });
        });
}).apply(this, [jQuery]);

Я хочу обработать ответ ajax с кодом, как если бы он работал естественным образом. Какой более чистый способ сделать это?

У меня есть 2 другие формы на странице, использующие метод представления класса "contact-form", поэтому я хотел бы продолжать использовать это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...