获取正确的 ID 以在具有多个帖子的站点中删除

Question

我只是运行遇到了一个我无法理解的问题。

我有一个网站，其中包含用户制作的所有应用程序，如下所示：

我在每个 post 上都有一个 delete/cancel 的按钮，这个 post (Bewerbung zurückziehen)。

按下该按钮时，会打开一个带有一些文本的模式。当他按下模式中的删除按钮时，如果用户确定要删除它，则应用程序将被取消。

但是，删除的始终是页面上的第一个页面，而不是按下按钮的那个页面。

我必须以某种方式获取按下按钮的应用程序 ID，但我对如何操作一无所知。

这里是 blade 代码：

<div class="flex-grow">
    @foreach($bewerbungen as $bewerbung)
        @foreach($stellenanzeigen_names as $stellenanzeigen_name)
            @if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
                <div class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 grey_bg border-solid border-2 border-black rounded-lg">
                    <!--Card 1-->
                    <div>
                        {{ $stellenanzeigen_name->Titel }}
                        <hr class="border-black">
                    </div>
                    <div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
                        ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}
                    </div>
                    <div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
                        ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}
                    </div>
                    <div class="flex justify-end">
                        <button type="submit"
                                name="open_btn"
                                class="open-btn mr-8 text-black px-4 py-3 rounded text-base font-medium button_bg float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
                        >
                            Bewerbung zurückziehen
                        </button>
                    </div>
                    <div id="cancel_appl_modal"
                         class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md post_bg hidden text-white">
                        <div class="mt-3 text-center text-2xl">
                            Bewerbung zurückziehen
                        </div>

                        <div class="items-center px-4 py-3">
                            <label for="neue_telefonnummer" class="sr-only">Neue Telefonnummer</label>

                            <form method="post"
                                  action="{{ route('delete', $bewerbung->Bewerbung_ID) }}">
                                @csrf
                                <div class="text-lg mb-4">
                                    Wenn Sie die Bewerbung zurückziehen haben Sie keinen Zugriff mehr
                                    auf alle Daten.
                                    Die Daten werden jedoch noch im System archiviert.
                                </div>
                                <button type="submit"
                                        id="ok_btn"
                                        class="mb-4 pb-3 w-full text-black px-4 py-3 rounded text-base font-medium bg-teal float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 shadow-2xl border-2 w-full p-4 rounded-lg"
                                >
                                    Bewerbung zurückziehen
                                </button>
                            </form>
                        </div>

                        <div class="items-center px-4 py-3">
                            <button id="back_btn"
                                    class="mb-4 pb-3 w-full text-black px-4 py-3 rounded text-base font-medium bg-teal float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 shadow-2xl border-2 w-full p-4 rounded-lg"
                            >
                                zurück
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    @endforeach
</div>

这是模态的JS代码：

let buttons = document.querySelectorAll('.open-btn');

var delete_appl_modal = document.getElementById("cancel_appl_modal");

buttons.forEach((button) => {
    button.addEventListener('click', function (event) {
        // this is where you would open the modal
        delete_appl_modal.style.display = 'block';
        console.log(event.target.innerHTML);
    })
});

var submit_btn = document.getElementById("ok_btn");

var back_btn = document.getElementById("back_btn");

open.onclick = function () {
    delete_appl_modal.style.display = "block";
}

back_btn.onclick = function () {
    delete_appl_modal.style.display = "none";
}

window.onclick = function (event) {
    if (event.target == modal) {
        delete_appl_modal.style.display = "none";
    }
}

Answer 1

这是您的表格：

<form method="post" action="{{ route('delete', $bewerbung->Bewerbung_ID)}}">

但它是在一个循环中，所以大概你正在创建很多，每个都有相同的按钮和相同的 ID :

<button type="submit" id="ok_btn"  ... >

由于 ID 必须是唯一的，当您的 javascript 触发时，它会查找 ID 为“ok_btn”的元素以提交相关表单。由于有很多（同样，ID 应该是唯一的），所以它只提交它遇到的第一个。所以它总是只会删除页面上的第一个。

我的建议是：

不要将表单或模式放在循环中。
将模态框放在末尾，其中包含表单，表单中有一个隐藏字段（称为“delete_id”。
使用 javascript 填充“delete_id”与用户单击以调出模式时要删除的事物的相关 ID。
像现在一样使用确认按钮提交表单。

Answer 2

我找到了一个带有小变通方法的解决方案！

我按照评论/答案中的建议将模式移出了循环，然后我添加了两个隐藏的输入字段：

<form method="post"
                                  action="{{ route('delete', $bewerbung->Bewerbung_ID) }}">
                                @csrf
                                <div class="text-lg mb-4">
                                    Wenn Sie die Bewerbung zurückziehen haben Sie keinen Zugriff mehr
                                    auf alle Daten.
                                    Die Daten werden jedoch noch im System archiviert.
                                </div>
                                <input type="hidden" id="email" name="email" value="{{ $bewerbung->bewerber_email }}">
                                <input type="hidden" id="delete_id" name="delete_id" value="">
                                <button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-black px-4 py-3 rounded text-base font-medium
                                                bg-teal float-right shadow transition
                                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
                                                shadow-2xl border-2 w-full p-4 rounded-lg">
                                    Bewerbung zurückziehen
                                </button>
                            </form>

因此，对于第一个字段，用户的电子邮件被传递到控制器，对于第二个字段，我使用此 javascript 代码分配值：

function reply_click(clicked_id)
        {
            document.getElementById("delete_id").value = clicked_id;
        }

打开模式的按钮现在看起来像这样：

<button type="submit" name="open_btn" class="open-btn mr-8 text-black px-4 py-3 rounded text-base font-medium
                                                    button_bg float-right shadow transition
                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" id="{{$bewerbung->Bewerbung_ID}}" onclick="reply_click(this.id)">Bewerbung
                                    zurückziehen
                                </button>

感谢所有评论，你们的提示让我找到了正确的方向:)

获取正确的 ID 以在具有多个帖子的站点中删除

Getting the correct ID to delete in site with multiple posts

html

javascript

php

laravel

laravel-blade