Отправка формы без перезагрузки страницы

InstantCMS 2.X

Отправка формы через ajax

#1 21 января 2020 в 21:02

Такую отправку я сделал. Получил работающий вариант, но возникли вопросы.
Для примера приведу упрощенный код. Задача — разделить одно число на другое, ответ получить на той же странице.
Контроллер называется division.

system/controllers/division/frontend.php

 
<?php
 
class division extends cmsFrontend {
    public function actionIndex() {
        $form = $this->getForm("division");
        $errors = false;
        $numbers = [];
        $template = cmsTemplate::getInstance(); 
        $template->render("index", [
            "form" => $form,
            "errors" => $errors,
            "numbers" => $numbers
        ]);
 
    }
    public function actionCalc() {
        if ($this->request->isAjax() === false) {
            exit;
        }
        $post = (object)$_POST;
        if (is_numeric($post->source) && is_numeric($post->divider) && $post->divider != 0) {
            $reply["result"] = (float)$post->source / (float)$post->divider;
            $reply["msg"] = "Расчет выполнен.";
        } else {
            $reply["result"] = "-";
            $reply["msg"] = "Данные некорректны. Расчет не  выполнен.";
        }
        $s = json_encode($reply);
        header("Content-type: application/json");
        echo $s;
        exit;
    }
}

system/controllers/division/forms/form_division.php

 
<?php
class formDivisionDivision extends cmsForm {
 
    public function init() {
 
        return [
           [
               "type" => "fieldset",
               "childs" => [
                   new fieldNumber("source", [
                       "title" => "Исходное число",
                       "rules" => [
                            ["required"]
                        ]
                   ]),
                   new fieldNumber("divider", [
                       "title" => "Делитель",
                       "rules" => [
                            ["required"]
                        ]
                   ])
               ]
           ] 
        ];
    }
 
}

templates/default/controllers/division/index.tpl.php

 
<?php
$d = "Деление";
$this->setPageTitle($d);
$this->addBreadcrumb($d);
?>
<h1><?php echo $d; ?></h1>
<?php
$this->renderForm($form, $numbers, [
        //"action" => "",
        //"method" => "post",
        "submit" => ["title" => "Рассчитать", "id" => "calc"]
    ], $errors);
 
?>
 
<div id="result"></div>
<div id="msg"></div>
 
<script>
 
$('#calc').on('click',function(e) {
 
    var source = $('#source').val();
    var divider = $('#divider').val();
 
    $.ajax({
        url: 'calc',
        data: {
            'source' : source,
            'divider' : divider},
        type: 'post',
        success: function(response){
            $('#result').html(response.result);
            $('#msg').html(response.msg);
        }
     });
 
     e.preventDefault(); 
});
</script>

Вопросы:
1. Как в шаблоне получить id формы? Чтобы не ковырять зачения так: var source = $('#source').val();
2. Почему в JS адрес обработчика формы задаётся фактически экшеном url: 'calc' ?
3. В моём варианте не работает атрибут required в input, что досадно.
Понимаю, что пошел своим путём и можно всё сделать "классически", но как это сделать пока не знаю.

#2 21 января 2020 в 21:19

@IamB,
Не понял зачем отправлять калькуляцию в php, если яваскрипт сам хорошо делит и умножает.

#3 21 января 2020 в 21:44

Ris, это упрощённый пример. Вам точно нужно разобраться в простыне на 200 строк? Или только суть?
У меня нет намерения грузить кого-то лишними задачами.

Сегодня в 04:33

#4 21 января 2020 в 21:52

только суть
@IamB

Я понимаю, что какие-либо действия без перезагрузки — это аякс.
Также понимаю, что отправка запросов js-php несколько раз туда-сюда в одной валидации формы не есть хорошо.
Но почему не отправить из php в браузер столько данных, сколько возможно и не работать с этими данными уже в js?

#5 21 января 2020 в 22:17

Ris, а можно я сам буду решать как мне работать с данными в каждой конкретной ситуации?
Но в случае с недокалькулятором, то на боевом сайте его, конечно, стоит решить на JS.

#6 21 января 2020 в 22:32

1. Как в шаблоне получить id формы? Чтобы не ковырять зачения так: var source = $('#source').val();
@IamB

а причём id формы если в примере

$('#source').val();

получения значения поля по id ?
в icms2 id формы динамический

md5(microtime(true))

если не передан атрибут

$attributes['form_id']

а так как вариант получить объект формы при действии для вложенного через

var form = $(this).closest("form");

2. Почему в JS адрес обработчика формы задаётся фактически экшеном url: 'calc' ?
@IamB

наверное потому что action у формы такой? а в ajax url в js перехватчике не определён? или я не понял ситуацию))

3. В моём варианте не работает атрибут required в input, что досадно.
@IamB

возможно ваша js функция вызывается через click а не submit и если же так, то в коде не присутствует цикла проверки полей с учётом required)

Решаю проблемы на ваших проектах)

#7 21 января 2020 в 22:36

Ris, а можно я сам буду решать как мне работать с данными в каждой конкретной ситуации?
@IamB

Нельзя, конечно же, но что с вами поделать/? smile

Попробуйте посмотреть структуру формы, и найти там id.
$structure = $form->getStructure();

#8 21 января 2020 в 22:44

а причём id формы если в примере получения значения поля по id ?
ideasdigger

Чтобы получить значения полей формы так:

data: $(#id_form).serialize(),

#9 21 января 2020 в 22:52

Чтобы получить значения полей формы так:
@IamB

так я выше в ответе всё рассказал))
1 из вариантов модернизировать ваш

templates/default/controllers/division/index.tpl.php

а именно участок

 
<?php
$this->renderForm($form, $numbers, [
        //"action" => "",
        //"method" => "post",
        "submit" => ["title" => "Рассчитать", "id" => "calc"]
    ], $errors);
 
?>

изменить на

 
<?php
$this->renderForm($form, $numbers, [
        'form_id' => "id_form",
        //"action" => "",
        //"method" => "post",
        "submit" => ["title" => "Рассчитать", "id" => "calc"]
    ], $errors);
 
?>

и у вашей формы будет id не md5 строка а id_form )

Решаю проблемы на ваших проектах)

#10 21 января 2020 в 22:59

$structure = $form->getStructure();
Ris

Увы! Здесь id формы не увидел.

#11 21 января 2020 в 23:07

ideasdigger, ваш вариант с id формы сработал. Благодарю!

В результате файл templates/default/controllers/division/index.tpl.php стал таким

Код

 
<?php
$d = "Деление";
$this->setPageTitle($d);
$this->addBreadcrumb($d);
?>
<h1><?php echo $d; ?></h1>
<?php
$formID = md5(microtime(true));
$this->renderForm($form, $numbers, [
        "form_id" => $formID,        
        "submit" => ["title" => "Рассчитать", "id" => "calc"]
    ], $errors);
 
?>
 
<div id="result"></div>
<div id="msg"></div>
 
<script>
 
$('<?php echo "#".$formID; ?>').submit(function(e) {
 
    $.ajax({
        url: 'calc',
        data: $(this).serialize(),
        type: 'post',
        success: function(response){
            $('#result').html(response.result);
            $('#msg').html(response.msg);
        }
     });
 
     e.preventDefault(); 
});
</script>

И атрибут required в input теперь работает.

Сместить центр Яндекс карты

Предупреждение в Google Search

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Отправка формы без перезагрузки страницы

Похожие темы

AJAX фильтр без перезагрузки страницы

Ajax обновления дива без перезагрузки страницы

Как сделать что бы уведомления приходили не перезагружая страницу

Форма отправки сообщения на почту пользователю

Почта по PHP mail проверка работает отправки нет

Действие после отправки сообщения (уведомления)

InstantCMS Team

О проекте

Поддержка

Дополнения