Creating a MODX Resource from a Snippet

In order to get a form that works on ajax you need:

Html form code

<div id="rightContent">
 
 
<div id="formParticipantsContainer">
 
<form method="post" id="formParticipants">
 
<div>
<input type="hidden" name="name2" />
    <div><label for="formParticipantsName">Имя</label></div>
    <div><input type="text" name="name" id="formParticipantsName" value="" /></div>
</div>
 
<div>
    <div><label for="formParticipantsLastname">Фамилия</label></div>
    <div><input type="text" name="lastname" id="formParticipantsLastname" value="" /></div>
</div>
 
<div>
    <div><label for="formParticipantsAge">Возраст</label></div>
    <div><input type="text" name="age" id="formParticipantsAge" value="" /></div>
</div>
 
<div>
    <div><label for="formParticipantsPhone">Телефон</label></div>
    <div><input type="text" name="phone" id="formParticipantsPhone" value="" /></div>
</div>
 
<div>
    <div><label for="formParticipantsEmail">E-mail</label></div>
    <div><input type="text" name="email" id="formParticipantsEmail" value="" /></div>
</div>
 
<div>
 
    <div><label for="formParticipantsTripMembersCount">Количество людей</label></div>
    <div><input type="text" name="trip_members_count" id="formParticipantsTripMembersCount" value="" /></div>
</div>
 
<div>
    <div><label for="formParticipantsTripPurpose">Цель</label></div>
    <div><select name="trip_purpose" id="formParticipantsTripPurpose"><option value="">Выбор цели:</option><option value="Обучение">Обучение</option><option value="Отдых">Отдых</option><option value="Аренда">Аренда</option></select></div>
 
</div>
 
<div>
<div>
    <div><label>Даты поездки:</label></div>    
    <div>
    <div>
        <div><label for="formParticipantsTripStartDate">Начала</label></div>
        <div><input type="text" name="data_start" id="formParticipantsTripStartDate" value="" /></div>
    </div>
 
    <div>
        <div><label for="formParticipantsTripEndDate">Окончания</label></div>
        <div><input type="text" name="data_end" value="" /></div>
    </div>
    </div>
</div>
</div>
 
<div>
    <div><label for="formParticipantsComment">Комментарии, пожелания</label></div>
 
    <div><textarea cols="40" rows="4"  name="comment" id="formParticipantsComment"></textarea></div>
</div>
<div  style="display:none">
<input type="text" name="data_rodots" value="" />
</div>
<div>
    <input type="button" onclick="send();" name="submit1" value="Отправить" />
</div>
 
</form>
 
<div id="result"></div>
</div>
 
</div>

The shape has a id. formParticipants All elements of this id will be transferred to the form handler.

For a page with a form, in head we will write a little JS, which will be responsible for sending data from the form:

<script type="text/javascript">
function send()
{
var data = $('#formParticipants').serialize();
       $.ajax({
                type: "POST",
                url: "https://ifreework.com/en/portfolio/internet-magazinyi/gormet-texnologiya/",
                data: "data="+data,
                success: function(html) {
                        $("#result").empty();
                        $("#result").append(html);
                }
        });
 
}
 
 </script>

url is the address of the document that is responsible for data processing, the blank template that is not cachable, do not show in the menu, write a snippet call in the content body

[!send_data!]

Snippet shape handler send_data

<?php
$title = "Заявка с сайта";
// $to - кому отправляем
$to = 'admin@ifreework.org';
// $from - от кого
$from= 'admin@ifreework.org';
if (!empty($_POST['name']) && !empty($_POST['phone']) && !empty($_POST['email']) && empty($_POST['data_rodots'])){
$mess = '
Имя:'.$_POST['name'].'<BR />
Фамилия:'.$_POST['lastname'].'<BR />
Возраст:'.$_POST['age'].'<BR />
Телефон:'.$_POST['phone'].'<BR />
E-mail:'.$_POST['email'].'<BR />
Количество людей:'.$_POST['trip_members_count'].'<BR />
Цель:'.$_POST['trip_purpose'].'<BR />
<label>Даты поездки:</label>
Начало:'.$_POST['data_start'].'<BR />
Конец:'.$_POST['data_end'].'<BR />
Комментарии, пожелания:'.nl2br($_POST['comment']).'<BR />
';
    require_once('assets/libs/docmanager/document.class.inc.php');
    $doc = new Document(); // создаём новый док
    $doc->Set('parent','50');//куда  пишем новый док
    $doc->Set('pagetitle','Заявка от '.$modx->db->escape($_POST['name']));// заголовок документа
    $doc->Set('alias','post'.time()); //алиас
    $doc->Set('content',$modx->db->escape($mess)); // наш контент
    $doc->Set('template','3'); // наш шаблон
    //$doc->Set('tvComment','post to comment');// если будут использоваться TV 
    $doc->Save();
 
// функция, которая отправляет наше письмо.
mail($to, $title,$mess, 'From:'.$from. "\r\n" . "MIME-Version:1.0\r\nContent-type: text/html; charset=utf-8");
mail($_POST['email'], $title,$mess, 'From:'.$from. "\r\n" . "MIME-Version:1.0\r\nContent-type: text/html; charset=utf-8");
//print_r($_post); exit;
echo '<span style="color:red">Спасибо, Ваши данные переданы.</span><BR />';
    
}
else {
echo '
Пожалуста, заполните обязательные поля.';
}
?>

 

At the very bottom of the html form is div with id result – it will output the result of processing the form data.

You also need to connect the class.

document.class.inc.php