Additional button in Yii2 form submits the form instead of calling its action

Question

I have a typical Yii2 form for updating my model with a typical submit button. Next to it, I have a "Delete photo" button, that appears, if there is any photo to delete. The piece of view looks like that:

<?= Html::submitButton('Save changes', ['class' => 'btn btn-primary', 'name' => 'edit-button']) ?>

<?php $image = isset($page->photo) ? $page->photo->getImageUrl() : null; ?>

<?php if (isset($image)): ?>

    <?= Html::a('Delete photo', ['delete-image', 'lab' => $lab->id, 'kind' => $page->kind], [
        'class' => 'btn btn-danger',
        'data' => [
            'confirm' => 'Do you really want to delete this photo?',
            'method' => 'post'
        ],
    ]) ?>

<?php endif; ?>

When there is a photo attached to this model and these two buttons appear next to each other, I must comment out 'method' => 'post' part in second button code. Because, if I don't this this, the second button is... submitting the form (just like the first one) instead of calling lab/delete-image route.

This is the first thing, that I don't understand. The entire code is either generated by Gii or copy-pasted from some Yii tutorials. Not even a bit of my invention and yet it works strangely. What am I missing?

It seems, that normal Html::a link (only styled by Twitter Bootstrap to look like a button, but not being a button at all) is submitting a form, instead of calling its action, when it contains data-method="post" attribute in element code. Is this a bug in Yii2 or am I missing something?

Answer 1

You need to place the link outside of the form. For calling actions from elements with data-method attribute yii has js function handleAction, and its documentation says:

This method recognizes the data-method attribute of the element. If the attribute exists, the method will submit the form containing this element. If there is no containing form, a form will be created and submitted using the method given by this attribute value (e.g. "post", "put").

For hyperlinks, the form action will take the value of the "href" attribute of the link.

Also if you use yii2 v2.0.3 or higher you can add data-params attribute which value should be JSON representation of the data, and this data will be submitted in request. As example:

 echo Html::a('Delete image', ['delete-image'], [
     'data' => [
        'confirm' => 'Do you really want to delete this photo?'
        'method' => 'post',
        'params' => [
            'lab' => $lab->id,
            'kind' => $page->kind,
        ],
    ],
]);

In this example params array will be json encoded by yii2 internaly