Отправка формы в библиотеке BX методом ajax
Допустим на странице имеем некую простую формы, данные с которой нам надо отправить:
<form id="bx_custom_form">
<input type="text" name="name" placeholder="Ваше имя" />
<input type="text" name="phone" placeholder="Номер телефона" />
<input type="file" name="file">
<input type="submit" value="Отправить" />
</form>
Давайте напишем JS
код с использованием библиотеки Bitrix JS
. Данный с формы будем получить при помощи интерфейса FormData
:
BX.ready(function () {
// получаем форму
let customForm = BX("bx_custom_form");
// вешаем обработчик событий на отправку формы
BX.bind(customForm, "submit", BX.proxy(sendForm, this));
// функция отправки
function sendForm(e) {
// с формой работаем через объект FormData
let data = new FormData(customForm);
// ajax запрос
BX.ajax({
url: "/ajax/sendForm.php", //адрес на который передаются данные с формы
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);
}
});