Всем привет!
Народ, заметил вот такую проблему:
Есть форма, на ней есть поля, и есть капча.
При клике на кнопку "Отправить" этой формы я вызываю Ajax-запрос для проверки капчи (чтобы капча проверялась без перезагрузки страницы).
Хочу сделать так, чтоб если капча заполнена верно, то submit формы продолжался бы дальше, и форма работала бы дальше, как будто без ajax-запроса.
Но вот в чём проблема:
Вешаю на событие submit-формы Ajax-запрос, и если Ajax-запрос выполнен успешно, то форма бы работала дальше. Но этого не происходит.
Вот код:
Обработка клика по кнопке "Отправить":
Проблема в том, что если капча заполнена верно, то страница просто перезагружается, и форма никуда не отправляет данные. Помогите пожалуйста, кто-нибудь с этим сталкивался? Если да, то как решали?
CMS: Bitrix
Народ, заметил вот такую проблему:
Есть форма, на ней есть поля, и есть капча.
При клике на кнопку "Отправить" этой формы я вызываю Ajax-запрос для проверки капчи (чтобы капча проверялась без перезагрузки страницы).
Хочу сделать так, чтоб если капча заполнена верно, то submit формы продолжался бы дальше, и форма работала бы дальше, как будто без ajax-запроса.
Но вот в чём проблема:
Вешаю на событие submit-формы Ajax-запрос, и если Ajax-запрос выполнен успешно, то форма бы работала дальше. Но этого не происходит.
Вот код:
| Код |
|---|
<fo rm 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> <p></p> </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: Bitrix
