/ Передача данных формы с использованием Bitrix JS и BX.ajax

Передача данных формы с использованием Bitrix JS и BX.ajax

19 Апр 2021
Дмитрий М.
535

Допустим на странице имеем некую простую формы, данные с которой нам надо отправить.

<form id="bx_custom_form">
<input type="text" name="name" placeholder="Ваше имя" required="required"/>
<input type="text" name="phone" placeholder="Номер телефона" required="required"/>
<input type="submit" value="Отправить"/>
</form>

Давайте напишем JS код с использованием библиотеки Bitrix JS.

Данный с формы будем получить при помощи интерфейса FormData.

BX.ready(function(){
   var customForm = BX('bx_custom_form');
   BX.bind(customForm, 'submit', BX.proxy(sendForm, this));
})
function sendForm(e){
   let data = new FormData(this);
   BX.ajax({
      url: '/ajax/sendForm',  //адрес на который передаются данные с формы
      data: data,             //данные формы - у нас содержатся в `data`
      method: 'POST',         //метод передачи данных POST или GET
      dataType: 'json',       //тип передаваемых данных
      processData: false,     //
      preparePost: false,     //предобработка передаваемых данных
      onsuccess: function(data){  //в случаи успеха, выполняем действия
           console.log(data); //выводим полученные данные в результате успеха.
        },
        onfailure: function(){  //действия в случаи ошибки
           console.log('error') //выводим в результате ошибки, сообщение об ошибки
        }
   });
   return BX.PreventDefault(e);
}

Для того чтобы корректно передавались данные формы, полученные при помощи интерфейса FormData, в ajax необходимо чтобы были указаны параметры processData и preparePost со значением FALSE. Эти параметры указываются для BX.ajax.

Если вы используете для передачи данных jQuery ajax, тогда необходимо значение FALSE присвоить параметрам: processData и contentType.

Статья была полезна? Поблагодарите автора.

Самые читаемые
#1С Битрикс, #Bitrix CMS, #.htaccess, #настройка редиректов
4 Авг 2019
#Хлебные крошки, #1С Битрикс, #Bitrix CMS, #bitrix:breadcrumbs, #component_epilog, #кэширование
1 Окт 2018
#ресайз изображений, #1С Битрикс, #Bitrix CMS
3 Мар 2019
#bitrix, #robots.txt, #sitemap.xml, #поддомены, #мультисайтовость
16 Окт 2018
#bitrix, #bitrix:catalog.section, #скидки, #товары со скидкой, #страница скидок, #страница со скидками
4 Окт 2018
#Bitrix CMS, #breadcrumb, #bitrix:breadcrumbs, #хлебные крошки, #настройка
13 Фев 2019
#bitrix, #пользовательские свойства, #тип свойств, #привязка к элементам
27 Ноя 2019
#bitrix, #свойства элементов, #обработчик событий, #OnBeforeIBlockElementUpdate, #OnIBlockElementSetPropertyValues
21 Июл 2020
#bitrix:news, #сортировка, #фильтрация, #bitrix:catalog, #catalog.section, #news.list
16 Дек 2020