19 апр 2021
8488
Допустим на странице имеем некую простую формы, данные с которой нам надо отправить.
<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.