Prevent default on calling actions using a form action

[wraith brook]

Heyyyyall,

Did anyone figure out a way to prevent default (and scroll to top) on calling actions using a form action in Astro?

This has been an issue for a while now 🙁 https://github.com/withastro/astro/issues/9488

---
import { actions } from "astro:actions";

const result = Astro.getActionResult(actions.getGreeting);

console.log({ result });
---

<form method="POST" action={actions.getGreeting}>
  <input name="name" value="hey" />
  <button>Submit</button>
  {result?.error && <p class="error">Unable to sign up. Please try again later.</p>}
</form>

The solutions in th GH issue are valid, but I was hoping by now we have a nicer solution, instead of using <script> tags 🙏🏻

@pastel jacinth 🙏🏻

[pastel jacinth]

Are you talking about when you refresh the page after submit it will resubmit the form?

Or do you just want to prevent default submit of the button and then submit with JavaScript instead of the browser default with just html

[wraith brook]

So I actually like the default submit cuz I don't want to introduce javascript to the page.

I am just trying to avoid the page scrolling back to top, so I can show the succesful message in the same place, with no redirect 🤔

[pastel jacinth]

Mm so the form submits and the page reloads and when it does to goes back to the top instead of preserving scroll location ?

And do you have the <ClientRouter/> ?

[wraith brook]

Yes 🙏🏻

I don't have the <ClientRouter />

[pastel jacinth]

Right on, so it’s just purely the browser defaults

[wraith brook]

Yeah, I was hoping I could achieve it with not extra code

But I understand that's how HTML forms work 😢

[pastel jacinth]

Ya, you could add JavaScript or redirect server side to a fragment like #success