Astro <ClientRouter> & Form Handling | Astro Lounge | Page 1

polar sorrel Feb 19, 2025, 2:40 PM

#

Are you calling the action from within a script tag?

#

Is this a solid JS component?

#

You don't need to use a script tag within that

#

I would instead add your event listeners within the onMount hook that solid JS has

mental oracle Feb 19, 2025, 2:57 PM

#

My form tool bar (submit, cancel, delete) etc.. are exactly the same and <ClientRouter/> has a very good user - experience .

polar sorrel Feb 19, 2025, 2:57 PM

#

What issues did you experience with the ClientRouter and a full solid js component?

#

I've used that combination a few times now without issue

mental oracle Feb 19, 2025, 2:58 PM

#

I did not use solidjs component at all; i am only using "signals" to detect changes in formData; absolutely nothing else ..

polar sorrel Feb 19, 2025, 2:59 PM

#

Right but you said the reason you weren't doing it was because of the ClientRouter, which leads me to believe you had issues doing it that way 😅

#

I'm not sure then, I've not tried using solid JS just within a normal Astro components script tag like that 😅

mental oracle Feb 19, 2025, 3:02 PM

#

actually every thing works ! also doesn't work ! 😄 ; what happens is as i navigate between different form pages; when i hit sumbit; all the actions from the previous visited form pages are submitted;

#

that is is the only thing which is actually going wrong ..

polar sorrel Feb 19, 2025, 3:03 PM

#

And your forms all have unique IDs?

mental oracle Feb 19, 2025, 3:04 PM

#

yup and so do the routes; so i explicitly check to ensure that;

polar sorrel Feb 19, 2025, 3:05 PM

#

Hmmm I would start adding in some console.logs then on submission so you can verify what formdata you are seeing, which might shed some light on things

mental oracle Feb 19, 2025, 3:05 PM

#

I did that and i clearly see that the current form Data is getting submitted to the "action" of the current form & surprisingly all the other actions of the other forms.

polar sorrel Feb 19, 2025, 3:06 PM

#

Does each form have it's own action?

mental oracle Feb 19, 2025, 3:08 PM

#

yup unique actions : updateMember; updateTitle,
deleteMember,
deleteTitle,
etc..

if you look below; if you notice ; both the actions are gettign called ! though i hit "submit" on the "updateJobTitle" form 😄

20:36:19 [204] POST /_actions/updateMember/ 18ms
20:36:19 [200] POST /_actions/updateJobTitle/ 12ms

polar sorrel Feb 19, 2025, 3:08 PM

#

Can I see your submit logic?

Also you can put your code in code blocks by using tripple backticks

#

like this

mental oracle Feb 19, 2025, 3:19 PM

#

and when i hit that submit both these actions get called the "second action" below is from the previously visited page.

20:36:19 [204] POST /_actions/updateMember/ 18ms
20:36:19 [200] POST /_actions/updateJobTitle/ 12ms

polar sorrel Feb 19, 2025, 3:20 PM

#

Yah I mean I'm only seeing updateJobTitle and deleteJobTitle being used here so I am really unsure why the other actions would be submitting

One thing you could try and do is breakout your actions into separate folders like this so you could have a folder like src/actions/jobTitle.ts which you would use within your actions like

import { jobTitle } from "./jobTitle.ts"

export const server = {
  jobTitle,
}

and then you would call it like await actions.jobTitle.update(payload)

I don't know if it will help fix the issue, but maybe can help us narrow down the cause?

also not to derail, but are you using the studiocms UI toasts? 😮 Love those

#

Good question and I don't know the answer to it haha!

Hopefully someone else from support will pop in today and be able to clarify that

#Astro <ClientRouter> & Form Handling