Народ, заметил такую проблему:
Форма есть, на ней есть поля, и есть капча. Когда я нажимаю кнопку «Отправить» в этой форме, я вызываю запрос Ajax, чтобы проверить капчу (чтобы капча проверялась без перезагрузки страницы).
Я хочу убедиться, что если капча заполнена правильно, тогда форма отправки продолжится, и форма будет работать дальше, как будто без запроса ajax.
Но вот проблема:
Я кладу трубку запрос Ajax для события формы отправки, и если запрос Ajax был успешным, форма будет работать дальше. Но этого не происходит.
Вот код:
<form name="SIMPLE_FORM_5" action="/services/depozitariy/?clear_cache=Y" method="POST" enctype="multipart/form-data">
<input type="hidden" name="sessid" id="sessid" value="ddc9425daec6fa807127a24e0d649598" /><input type="hidden" name="WEB_FORM_ID" value="5" />
<table>
<tbody>
<tr>
<td>
<h3 class="form-head">Форма обратной связи для клиентов</h3>
</td>
</tr>
</tbody>
</table>
<br />
<div class="request__wrapper">
<div class="request__header">
<div class="request__title">Напишите комментарий</div>
</div>
<div class="request__form">
<div class="form form_request">
<div class="form__section form__section_delimiter">
<div class="form__field">
<label js-inputshadow="" class="field is-required is-error">
<span class="field__title">ФИО</span><span class="field__main"><input required="" class="field__input" type="text" placeholder="" name="form_text_72" value="" /></span>
<span class="field__error">Значение не должно быть пустым</span>
</label>
</div>
<div class="form__columns">
<div class="form__columns-item">
<div class="form__field">
<label class="field test">
<span class="field__title">Компания</span>
<span class="field__main">
<input class="field__input" type="text" placeholder="" name="form_text_73" value="" />
</span>
</label>
</div>
</div>
</div>
<div class="form__columns">
<div class="form__columns-item">
<div class="form__field">
<label js-inputshadow="" class="field is-required">
<span class="field__title">Email</span>
<span class="field__main">
<input required="" class="field__input" type="email" placeholder="" name="form_text_74" value="" />
</span>
</label>
</div>
</div>
<div class="form__columns-item">
<div class="form__field">
<label class="field">
<span class="field__title">Телефон</span>
<span class="field__main">
<input class="field__input" type="text" placeholder="" name="form_text_75" value="" />
</span>
</label>
</div>
</div>
</div>
<div class="form__field">
<label js-inputshadow="" class="field">
<span class="field__title">Комментарий</span>
<span class="field__main">
<textarea class="field__input" type="textarea" placeholder="" name="form_textarea_76" rows="3"></textarea>
</span>
</label>
</div>
<div class="form__field">
<label js-inputshadow="" class="field is-filled">
<span class="field__title">Адрес страницы</span>
<span class="field__main">
<input class="field__input" readonly="" type="text" placeholder="" name="form_text_77" value="/services/depozitariy/" rows="3" />
</span>
</label>
</div>
<div class="form__section">
<div class="form__columns form__columns_2x form__columns_fields">
<div class="form__columns-item">
<div class="form__field">
<label js-inputshadow="" class="field is-required">
<span class="field__title">Введите символы с картинки</span>
<span class="field__main">
<!--Поле для ввода капчи-->
<input required="" class="field__input" type="text" placeholder="" name="captcha_word" value="" />
</span>
</label>
</div>
</div>
<div class="form__columns-item">
<div class="form__field">
<div js-inputshadow="" class="field is-filled">
<div class="field__title"> </div>
<div class="field__main">
<!--Скрытое поле-->
<input name="captcha_sid" value="07675f98c059fa60983a5983300dec40" type="hidden" />
<div class="request-captcha" js-request-captcha="" style="opacity: 1;">
<div class="request-captcha__body" js-request-captcha-body="">
<!--Картинка капчи-->
<img src="/bitrix/tools/captcha.php?captcha_code=07675f98c059fa60983a5983300dec40" />
</div>
<div class="request-captcha__controls">
<a href="#" class="request-captcha__refresh" js-request-captcha-refresh=""></a>
<a href="#" class="request-captcha__audio" js-request-captcha-audio=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form__disclaimer form__disclaimer_star">— Поля обязательные для заполнения</div>
</div>
<div class="form__actions">
<div class="form__field">
<label js-inputshadow="" class="toggle is-required">
<input required="" class="toggle__input" type="checkbox" name="agreement" />
<span class="toggle__fake"></span>
<span class="toggle__main">
<span class="toggle__title">Я согласен на <a href="#" js-open-layer="main/consent" class="link_dashed">обработку персональных данных</a> </span>
</span>
</label>
</div>
<div class="form__action">
<!--<button type="submit" class="button button_wide -xxs-button_full ">
<span class="button__content">
<span class="button__title">Отправить</span>
</span>
</button>-->
<input type="submit" class="button button_wide -xxs-button_full" name="web_form_submit" value="Отправить" />
</div>
</div>
</div>
</div>
</div>
</form>
Обработка щелчка по кнопке «Отправить»:
$('.layer[data-id="leave_comment"] form input[type="submit"]').on("click", function (e) {
console.log("Нажата кнопка отправки формы");
$data = "captcha_word=" + $('input[name="captcha_word"]').val() + "&captcha_code=" + $('input[name="captcha_sid"]').val();
console.log("data=" + $data);
$.ajax({
type: "POST",
async: false,
url: "/local/components/nsd/form.result.new/templates/leave_comment/check_captcha.php",
data: $data,
success: function (msg) {
console.log("Прибыли данные: |" + msg.trim() + "|" + typeof msg);
if (msg.trim() == "true") {
//Запускаем submit формы
//$('.layer[data-id="leave_comment"] form').trigger('submit');
//window.location.href = '/comment_success.php?formresult=addok';
$('.layer[data-id="leave_comment"] form').unbind("submit").submit();
} else {
//Сообщение об ошибке ввода капчи
e.preventDefault();
alert("Неверно заполнены символы с картинки!");
}
},
error: function (msg) {
console.log("Ошибка: " + msg);
},
});
});
Проблема в том, что если капча заполнена правильно, страница просто перезагружается и форма никуда данные не отправляет. Помогите пожалуйста, кто нибудь сталкивался с этим? Если да, то как вы решили?
CMS: Битрикс