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.

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