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