Я работаю над интеграцией 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", поэтому я хотел бы продолжать использовать это.