Передать данные формы в сниппет
Добрый день!
Перекопал много информации, но так четкий ответ и не нашел, буду очень признателен за помощь.
Мне надо сделать ипотечный калькулятор, без модх все делается просто, создаю формы, отправляю из них данные на эту же страницу (или другую, не важно), полученные данные складываю, умножаю, в общем делаю что мне надо и вывожу результат.
А модх делит логику от представления (сниппеты и чанки), получается, что сама форма должна находиться в чанке, а данные обрабатываться в сниппете.
Ну и сам вопрос – как мне из формы (чанк) передать данные в сниппет?
Перекопал много информации, но так четкий ответ и не нашел, буду очень признателен за помощь.
Мне надо сделать ипотечный калькулятор, без модх все делается просто, создаю формы, отправляю из них данные на эту же страницу (или другую, не важно), полученные данные складываю, умножаю, в общем делаю что мне надо и вывожу результат.
А модх делит логику от представления (сниппеты и чанки), получается, что сама форма должна находиться в чанке, а данные обрабатываться в сниппете.
Ну и сам вопрос – как мне из формы (чанк) передать данные в сниппет?
28 октября 2013, 15:14
Комментарии: 9
Блин, спасибо большое, ты реально помог!
Может кому интересно или пригодиться, выложу чудо творение:
Чанк
Код сниппета
Тут мы имеем три поля и кнопку отправки, так же прием запроса и вычисления суммы этих трех полей.
Еще раз большое спасибо Василий!
Может кому интересно или пригодиться, выложу чудо творение:
Чанк
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.form_db').submit(function(e){
e.preventDefault();
var m_method=$(this).attr('method');
var m_action=$(this).attr('action');
var m_data=$(this).serialize();
$.ajax({
type: m_method,
url: m_action,
data: m_data,
success: function(result){
$('#connect_table').html(result);
}
});
});
});
</script>
<div id="connect_table">[[!resource]]</div>Код сниппета
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
extract($_POST);
}
$count = $count1 + $count2 + $count3;
$output = '<form action="[[~[[*id]]]]" method="post" class="form_db">';
$output .= '<input type="number" name="count1" value="5" />';
$output .= '<input type="number" name="count2" value="7" />';
$output .= '<input type="number" name="count3" value="2" />';
$output .= '<button type="submit" name="submit">ok</button>';
$output .= '</form>';
$output .= "<p>$count</p>";
return $output;Тут мы имеем три поля и кнопку отправки, так же прием запроса и вычисления суммы этих трех полей.
Еще раз большое спасибо Василий!
Рано радуешься, нужно же еще форму вынести в чанк.
Указываем параметр с именем чанка:
Прописываем обработку чанка в сниппете:
И пишем сам чанк с формой myForm:
Вот, примерно так все в MODX и разделяется.
Указываем параметр с именем чанка:
<div id="connect_table">
[[!resource?tpl=`myForm`]]
</div>Прописываем обработку чанка в сниппете:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
extract($_POST);
}
$count = $count1 + $count2 + $count3;
return $modx->getChunk($tpl, array(
'count' => $count
));И пишем сам чанк с формой myForm:
<form action="[[~[[*id]]]]" method="post" class="form_db">
<input type="number" name="count1" value="5" />
<input type="number" name="count2" value="7" />
<input type="number" name="count3" value="2" />
<button type="submit" name="submit">ok</button>
</form>
<p>[[+count]]</p>Вот, примерно так все в MODX и разделяется.
Подскажите пожалуйста как решить проблему, делал все по аналогии, вот только при нажатии на кнопку формы, в блок подгружается вся страница целиком, а потом белый экран. Никак не могу решить проблему. Не понимаю где искать причину. Вот ссылка на не рабочий вариант http://www.alfapiter.ru/beta
Возможно, что версия библиотеки не подходит, хотя возможно, что ссыль ссылается не на корень сайта, а на корневую директорию сервера
<script>
$.ajax({
type: m_method, // "GET",
url: m_action, // "assets/components/x.php",
data: $('#connect_table').serialize() // m_data
}).done(function(result){
$('#connect_table').html(result);
});
return false;
</script>
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
