I just ran into an issue I just cant get my head around.
I have a site with all the applications a user has made, looking like this:
https://i.stack.imgur.com/V1wIu.png
Now I have on each post a button to delete/cancel this exact post ("Bewerbung zurückziehen")
On pressing that button a modal opens with some text if the user is sure to delete it, when he presses the delete button in the modal the application is canceled.
However, it is always the first on the page that gets deleted, not the one on which the button was pressed.
I have to somehow get the ID of the application on which the button is pressed, but I have zero clue on how to do it.
Here is the blade code:
<div >
@foreach($bewerbungen as $bewerbung)
@foreach($stellenanzeigen_names as $stellenanzeigen_name)
@if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
<div
>
<!--Card 1-->
<div >
{{ $stellenanzeigen_name->Titel }}
<hr >
</div>
<div >
ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}</div>
<div >
ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}</div>
<div >
<button type="submit" name="open_btn" >Bewerbung
zurückziehen
</button>
</div>
<div id="cancel_appl_modal"
>
<div >
Bewerbung zurückziehen
</div>
<div >
<label for="neue_telefonnummer" >Neue Telefonnummer</label>
<form method="post"
action="{{ route('delete', $bewerbung->Bewerbung_ID) }}">
@csrf
<div >
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" >
Bewerbung zurückziehen
</button>
</form>
</div>
<div >
<button id="back_btn" >
zurück
</button>
</div>
</div>
</div>
@endif
@endforeach
@endforeach
</div>
This is the JS code for the modal:
<script>
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";
}
}
</script>
CodePudding user response：
This is your form :
<form method="post" action="{{ route('delete', $bewerbung->Bewerbung_ID)}}">
but it's in a loop, so presumably you are creating lots of them, each with the same button with the same ID :
<button type="submit" id="ok_btn" ... >
Since ID has to be unique, when your javascript fires, it looks for the element with ID "ok_btn" to submit the relevant form. Since there are lots (again, ID should be unique) then it just submits the first one it comes to. So it will always just delete the first one on the page.
My suggestion would be :
- Don't put the form or the modal in the loop.
- Put the modal at the end, with the form inside it, and within the form have a hidden field (called, say, "delete_id".
- Use javascript to populate the "delete_id" with the relevant ID of the thing to be deleted when the user clicks to bring up the modal.
- Use the confirmation button to submit the form, as you do at the moment.
CodePudding user response：
I found a solution with a small workaround!
I moved the modal out of the loops, as suggested in the comments / answers, and then I added two hidden input fields:
<form method="post"
action="{{ route('delete', $bewerbung->Bewerbung_ID) }}">
@csrf
<div >
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" >
Bewerbung zurückziehen
</button>
</form>
So with the first field the email of the user is passed to the controller and with the second one I assign the value with this javascript code:
function reply_click(clicked_id)
{
document.getElementById("delete_id").value = clicked_id;
}
The button that open the modal now looks like this:
<button type="submit" name="open_btn" id="{{$bewerbung->Bewerbung_ID}}" onclick="reply_click(this.id)">Bewerbung
zurückziehen
</button>
Thanks to all in the comments, your hints led me to the right direction :)