Trigger Form Action using v2 Confirm Modal

[TentCityTech]

I'm trying to trigger a form action once the user clicks "confirm". It successfully triggers the form but doesn't pass the correct id and only triggers the first object in the each
block? Here's kind of what I got.

Imports....
let.....

const modal: ModalSettings = {
type: 'confirm',
// Data
title: 'Please Confirm',
body: 'Are you sure you wish to remove thing?',
response: (r: boolean) =>
if(r){
//submit form with id
handleSubmit()
}
console.log('response:', r),
};

const handleSubmit = () => {
document.getElementById("form").submit()
}

{each things as { id }}

handleSubmit} type="submit">delete

{/each

[Sarenor]

I'm happy to help, but: A couple of things:

1. which ID should be passed along? There's no mention in the code that I can see?
2. where are you using the modal settings to actually trigger the modal? That's also not visible in the code example.
3. Github supports markdown code formatting. I'd be very appreciative of you using the 3 ` backticks notation to get some formatted code :)

Also, if you want quicker chat-like support, we're available on Discord: https://discord.com/channels/1003691521280856084/1048010639219642419

[TentCityTech]

Sure! I wrote that using the GitHub app on my phone last night out of pure frustration. Here is my question properly formatted.

I'm trying to trigger a form action that deletes the iterated object once the user clicks "confirm". It successfully triggers the form but doesn't pass the correct id and only triggers the first object in the each block?

Oh and thank you for the quick response @Sarenor. Any help would be greatly appreciated. Also, if there is a better way to create this logic other than to trigger the form via an 'getElementById()` please don't hesitate to show me.

Thanks again!

<script lang="ts">
	import type { ActionData, PageData } from './$types'
	import { Icon, Trash } from 'svelte-hero-icons'
	import { getModalStore } from '@skeletonlabs/skeleton'
	import type { ModalSettings } from '@skeletonlabs/skeleton'

	export let data: PageData
	export let form: ActionData

	let body = ''

	const modalStore = getModalStore()
	const modal: ModalSettings = {
		type: 'confirm',
		title: 'Remove Thing?',
		body: body,
		response: (r: string) => {
			if (r) {
				console.log('form submitted')
			}
		}
	}

	const handleModal = (thing: string, id: string) => {
		modal.body = `You sure you want to remove ${thing} id:${id}`
		modal.response = () => {
			document.getElementById('form').submit()
			console.log('modal response', id)
			console.log('form', form)
		}
		modalStore.trigger(modal)
	}
</script>

<section>
	{#each data.things as { thing, id }}
		<div class="card">
			<button on:click={() => handleModal(thing, id)}>
				<Icon src={Trash} solid />
			</button>

			<form id="form" method="POST" action="?/deleteThing">
				<input name="id" type="hidden" value={id} />
			</form>
		</div>
	{/each}
</section>

[Sarenor]

Well, you're triggering the form with the constant id "form". Try this:

<form id="form{id}" method="POST" action="?/deleteThing">
    <input name="id" type="hidden" value={id} />
</form>

And doing document.getElementByID('form'+id).

If it's not necessary that it's a form handler you could just use fetch and a delete request as well.

[TentCityTech]

That worked! I didn't think about using the {id} placeholder in the id attribute. Now that you mention using using fetch i'll build out the logic for that instead. Thank you @Sarenor!

[Sarenor]

Happy to help :)

[blue-range]

But i think we should be able to pass variable to modals specially to confirm modal.

[Sarenor]

What exactly do you want to achieve?