Как в POST форме правильно передать данные, если использую внешний диалог подтверждения?

Question

[Dmi3ii]

У меня получилось реализовать рабочую форму, вот только реализация не нравится. Я использую SweetAlert. По кнопке "удалить файл" после подтверждения должен передаваться id файла post форме. Реализовал это через заполнение скрытого input (чувствую костыль).

Подскажите, пожалуйста, грамотную реализацию.

<code><?= var_dump($_POST) ?></code>
<?php View::title('Test') ?>
<form method="post">
    <input type="text" id="delete" name="delete" hidden>
    <button value="1" onclick="confirmation(event)">Удалить файл id=1</button>
    <button value="2" onclick="confirmation(event)">Удалить файл id=2</button>
    <button value="3" onclick="confirmation(event)">Удалить файл id=3</button>
</form>

<script>
function confirmation(event) {
    event.preventDefault(); // отключить submit
    swal({
        title      : "Вы уверены?",
        text       : "Удалить этот файл из комплекта документов?",
        icon       : "warning",
        buttons    : ['Отмена', 'Удалить'],
        dangerMode : true,
    }).then((willDelete) => {
        if (willDelete) {
            $('#delete').val(event.target.value); // передать id
            $('form').submit(); // отправить форму
        }
    });
}
</script>

Comments

[Николай Чуприк]

Как по мне, так норм реализация, если не использовать ajax.

Answer 1

[Николай Чуприк]

Но я бы всё-таки ajax использовал. Отправляю запрос на удаление по адресу url, и если всё удачно, то удаляю кнопку ту, которую нажали.

...
if  (willDelete ) {
	var xhr = new XMLHttpRequest ();
	xhr.open( 'POST', url );   //  url — адрес обработчика
	xhr.send( event.target.value );     //  Отправка асинхронного запроса с id
	
	//  Ожидание ответа
	xhr.onreadystatechange = function()	{
		if ( this.readyState == 4 )     //  Если ответ ОК, то 
			event.target.remove();   //  удаляем кнопку со страницы
		else
         ...   // Здесь действия, если на сервере что-то не удалось, сообщение или что-то ещё
	}
}

_____
UPD: Затупил, не увидел, что у вас jQuery. Тогда можно ещё короче написать, чем на ваниле, особенно, если не проверять ответ сервера :) :

<button value="1">Удалить файл id=1</button>
<button value="2">Удалить файл id=2</button>
<button value="3">Удалить файл id=3</button>

<script>
$( 'button' ).click( () => {
	var but = $( this );
	swal( {
		title      : "Вы уверены?",
		text       : "Удалить этот файл из комплекта документов?",
		icon       : "warning",
		buttons    : [ 'Отмена', 'Удалить' ],
		dangerMode : true,
		} )
	.then( ( willDelete ) => {
		if ( willDelete )	{
			$.post( url, but.val() );
			but.remove();
		}
	} )
} )
</script>