Modx revo. Как сделать отпавку формы без кнопки submit на ajax'e?

Question

[mydarck]

Сайт посвящен фото и видео съемке и имеет следующую структуру:
Наши работы
|__Свадьба
| |__Фото
| | |__Свадебные фотографии Антона и Петра : ) (ресурс содержащий в себе фотографии)
| |__Видео
| |__Видео со свадебные фотографии Антона и Петра : )
|__Венчание
|__т.д.
У раздела "Наши работы" планируется сделать фильтр следующего характера:
радио переключатель между разделами фото и видео и селект с названием родительского ресурса (например "Свадьба"). По умолчанию выводятся все дочерние ресурсы разделов фото и видео. Вывожу с помощью getPage:

[[!getPage@pagination?
  &elementClass=`modSnippet`
  &element=`getResources`
  &showHidden=`1`
  &tpl=`photoTpl`
  &includeContent=`1`
  &includeTVs=`1`
  &processTVs=`1`
  &limit=`2`
  &parents=`24, 25, 27, 28, 31, 30, 34, 33, 37, 36, 39, 40, 43, 42, 46, 49`
  &hideContainers=`1`
]]

где в &parents записаны id всeх разделов фото и видео. По клику на радио переключатель "фото" я думал сделать так, чтобы динамически без перезагрузки страницы параметр &parents поменял id всех родительских разделов на id только Фото или видео раздела, в зависимости от выбранного радио переключателя. Если же параллельно задействован селект, т.е. выбран к примеру раздел "Свадьба" и радио "Фото" то значение параметра &parents сужается до одного id и по нему производится выборка. Как таковой кнопки "отправить" нет получается, что событие submit должно происходить сразу по клику на кнопку или по выбору раздела в селекте.
Можно ли это реализовать с помощью ajax.
Разметку формы и код приблизительной выборки прилагаю:
Форта - фильтр

<form action="[[~[[*id]]]]" method="post" id="select-type-service">
	<div class="container">
		<div class="row">
			<div class="col-lg-4">
				<div class="jq-radio-photo">
					<input type="radio" name="photo-radio" class="photo-radio" />
					<p>Фотографии</p>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="jq-radio-video">
					<input type="radio" name="video-radio" class="video-radio" />
					<p>Видеосъемка</p>
				</div>
			</div>
			<div class="col-lg-4">
				<select class="selectpicker" data-width="100%" name="service[]">
				     <option value="4">Все разделы</option>
				     <option value="23">свадьба</option>
				     <option value="26">Корпоратив</option>
				     <option value="29">Венчание</option>
				     <option value="32">Выписка из роддома</option>
				     <option value="35">Крестины</option>
				     <option value="38">Детский сад</option>
				     <option value="41">Школьные годы</option>
				     <option value="44">Студийное фото</option>
				     <option value="47">Фотопрогулки</option>
				</select>
			</div>
		</div>
	</div>
</form>

Снипет выборки

<?php
if ( $_POST['service'][0] == 4 && empty($_POST['photo-radio']) && empty($_POST['video-radio'])){
$allRes = '24, 25, 27, 28, 31, 30, 34, 33, 37, 36, 39, 40, 43, 42, 46, 49';
} elseif ( $_POST['service'][0] == 4 && isset($_POST['photo-radio']) && empty($_POST['video-radio']))  {

$resources = $modx->getCollection('modResource',array('alias' => 'video'));
foreach ($resources as $k => $res) {
  $videoId .= $res->get('id'). ', ';
}
$videoRes = rtrim($videoId, ", ");
} elseif ($_POST['service'][0] == 4 && empty($_POST['photo-radio']) && isset($_POST['video-radio'])) {

$resources = $modx->getCollection('modResource',array('alias' => 'foto'));
foreach ($resources as $k => $res) {
  $photoId .= $res->get('id'). ', ';
}
$photoRes = rtrim($photoId, ", ");

}
?>

p.s. Две прозьбы: Не судите строго и Помогите ,пожалуйста, довести до ума.