1С-Битрикс — ajax-формы для сайта, один из методов

Решил предложить вашему вниманию один из методов программирования формы для отправки с сайта сообщений с валидацией и минимумом кода.

Для простоты предположим, что нам нужно отправлять только одно поле — «Имя» и это поле должно быть чем-то заполнено.

Необходимо создать компонент, который на странице будет вызываться таким образом:

$APPLICATION->IncludeComponent(
"dv:form",
"testtemplate",
array(
),
false
);

Код файла component.php будет такой:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

$this->IncludeComponentTemplate();

Код шаблона такой (шаблоны могут быть какие угодно):

<form class="flex">
<input name="EVENT" type="hidden" value="SEND_REQ">
<input type="text" placeholder="Ваше имя" name="NAME" data-fieldtitle="Ваше имя" data-required="1">
<button class="submit">Отправить заявку</button>
</div>

код sctipt.js шаблона:

$(".flex button.submit").on("click", function() {
let lang=$(this).data("lang")?$(this).data("lang"):"ru";
let err=[];
let vals={};
let email_pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,6})$/; ///^[a-z0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i;
let phone_pattern = /^\+\d[\d\(\)\ -]{4,14}\d$/;
$(".flex input[data-required=1], .flex select[data-required=1]").each(function(){

switch ($(this).attr('id')) {
case 'email':
if(!email_pattern.test($(this).val().trim()))
err.push($(this).data('fieldtitle') + (lang=='ru'?' заполнено некорректно':' filled in incorrectly'));
break;
case 'phone':
if(!phone_pattern.test($(this).val().trim()))
err.push($(this).data('fieldtitle') + (lang=='ru'?' заполнено некорректно':' filled in incorrectly'));
break;
default:
if (($(this).get(0).tagName == 'SELECT' && $(this).val().trim() == $(this).data("fieldtitle")) || ($(this).get(0).tagName == 'INPUT' && $(this).val().trim() == ''))
err.push($(this).data('fieldtitle') + (lang=='ru'?' заполнено некорректно':' not filled'));
}
});

$(".flex input, .flex select").each(function(){
vals[$(this).attr('name')] = $(this).val().trim();
});

if(err.length == 0)
{
$.ajax({
url: '/ajax/post.php',
method: 'post',
dataType: 'json',
data: vals
});
$("#thanks").show();
}
else
{
$(".errors p").html('<ul><li>' + err.join('</li><li>') + '</li></ul>');
$("#errors").show();
}

return false;
});

У нас идет обращение к /ajax/post.php . Там все очень просто:

<?
require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");
echo CEvent::Send($_REQUEST["EVENT"], "s1", $_REQUEST);

И последнее, что нужно сделать — это создать шаблон письма с указанием имени как в поле EVENT шаблона, т.е. в нашем случае это SEND_REQ.

Далее вы можете просто копировать шаблон и вызывать любую форму на любой странице сайта с минимумом программирования.