Called method in controller does not execute anything of a ajax-added field is submit

Hallo!

I have a form, where I add a dropdown, regarding an other dropdown. If I send the form, it gives me an error back, if I had not select something in the first dropdown. But if I do so, my ajax-form is shown and I could select something, but if I send the form, it does not execute anything. But the network tools shows data, which looks like the controller was called. Maybe someone can help me out. I have to say, this are my first experiences with ajax, so the problem could be there.

This is my form:

PHP Code:

<?= form_open('coin/update/mass'); ?>

    <div class="row">
        <?php foreach ($objects AS $in) : ?>
            [...]
        <?php endforeach; ?>

    </div>

    <div class="row">
        <div class="col">
            <select id="massEdit" name="massEdit" onchange="getDropdown()" class="form-control">
                <option value="">Massmanipulation...</option>
                <option value="moveToCollection">Move to collection</option>
                <option value="moveToLocation">Move to location</option>
            </select>
        </div>
        <div class="col" id="newDropdown">
        </div>
        <div class="col">
            <?= form_submit('submit', 'Go', 'class="btn btn-warning"') ?>
        </div>
    </div>


    <script type="application/javascript">

        var cappx = "<?= $csfrManually ?>"

        function getDropdown(csfr = cappx) {

            document.getElementById("newDropdown").innerHTML = csfr;

            var data = {
                cappx: csfr,
                action: document.getElementById("massEdit").value
            }

            $.ajax({
                url: '/collection/api/getMassEditList',
                type: 'post',
                dataType: 'json',
                data: data,
                success:function(data) {
                    cappx = data.hash
                    document.getElementById("newDropdown").innerHTML = data.target
                }

            });

        }
    </script>

<?= form_close(); ?>

Then I have this ajax-controller-part

PHP Code:

                case 'getMassEditList':
                {
                    [...]

                    return json_encode([
                        'mission' => 'success',
                        'hash'    => csrf_hash(),
                        'target'  => form_dropdown('massTarget', $list, '', 'class="form-control"'), // So its made by CI-tools and works
                    ]);

                    break;
                } 


And this is the controller

PHP Code:

    public function update($force = NULL)
    {
        die();
        switch ($force)
        {
            case 'stammdaten':
            {
                [...]
            }

            case 'pictures':
            {
                [...]
            }

            case 'history':
            {
                [...]
            }

            case 'mass':
            {

                if ($this->request->getVar('massEdit') == 'moveToCollection')
                {
                    $field = 'collection_id';
                }
                elseif ($this->request->getVar('massEdit') == 'moveToLocation')
                {
                    $field = 'location_id';
                }
                else
                {
                    session()->setFlashdata('messages', 'Auswahl fehlt.');
                    break;
                }

                $this->coinModel->set('$field','', false);

                $this->coinModel->whereIn('id', $whereIn);

                echo $this->coinModel->getCompiledUpdate();

                die();
                break;

            }
        }

        //return redirect()->back()->withCookies();
    } 


None of this "die()" breaks the execution. Also the redirect could not be this in this controller. The execution breaks if I send the form without executing the ajax-part. But if I do so, the request header shows, that the controller is called

Code:

scheme: https
host: [...]
filename: /coin/update/mass
Adresse: [...]
Status: 302 Found

And I see the request with all data from the form, including the ajax-part

Code:

{
"cappx": "837a3845af674a27d29e2388368dd224",
"massEdit": "moveToCollection",
"massTarget": "8",
"submit": "Go"
}

I'm out, I have no idea what happens here. Maybe someone has an idea what I doing wrong here maybe or how to call the controller right, if an ajax-form-part is used... I don't know, this are my first ajax-lines I do.

Thank you!

Okay, I did it
The reason was, that the changed CSFR key was only used within AJAX. A new given key has to be also in the main form. I just added one

Code:

$("input[name=cappx]").val(data.hash)

line in my success-function so that the JS-code looks like this now:

Code:

    <script type="application/javascript">

        var cappx = "<?= $csfrManually ?>"

        function getDropdown(csfr = cappx) {

            var data = {
                cappx: csfr,
                action: document.getElementById("massEdit").value
            }

            $.ajax({
                url: '/collection/api/getMassEditList',
                type: 'post',
                dataType: 'json',
                data: data,
                success:function(data) {
                    cappx = data.hash
                    $("input[name=cappx]").val(data.hash);

                    document.getElementById("newXDropdown").innerHTML = data.target
                }
            });

        }
    </script>