Can't prevent form's submission (page reload) if ViewTransitions is used

[slaetthult]

Astro Info

Astro                    v4.0.6
Node                     v18.18.2
System                   macOS (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/alpinejs
                         @astrojs/partytown

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I can't prevent form's submission if ViewTransitions is used. Or at least page gets reloaded.

<form onsubmit="return false;" method="POST">
    <button type="submit">Submit</button>
</form>

This form gets still submitted even though return false is used. Or at least page gets reloaded.
As soon as I remove ViewTransitions, everything works like expected.

Everytime I click the button, I get the following in terminal:

What's the expected result?

Form should not get submitted if onsubmit="return false;" is used and page should not reload.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ihjv95?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[martrapp]

Hi @slaetthult, starting with Astro v4.0.7 you can call event.preventDefault() from a submit event listener to prevent the default behavior, see #9486

[martrapp]

please upgrade to 4.0.7 and try this:

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Welcome to Astro.">
  <main>
    <form  method="POST">
      <button type="submit">Submit</button>
    </form>
  </main>
</Layout>
<script>document.querySelector("form").addEventListener('submit',(e)=>e.preventDefault())</script>

[slaetthult]

It works, thank you a lot!

[martrapp]

👍🏼 Good to hear!

[ArthurSalle]

Hi @martrapp , I'm currently facing the same problem but I'm using Astro with SSR for my form submission, is there any solution like the preventDefault() method but not on the client side?
At the first page load, every thing is fine but once I submit the form and then refresh multiple time my page it submit my form and my log('here') still appears.

I'm using it like this:

---
if (Astro.request.method === "POST") {
  console.log("here");
}
---

<form method="POST">
</form>

Thanks 🙂

[martrapp]

Hi @ArthurSalle 👋🏼, sadly I have no experience with SSR. But you should ask in the #support channel over at discord!

[ArthurSalle]

Ok, I'll take a look at it, thanks for your quick reply! 🚀

[CaseoJKL]

Ok, I'll take a look at it, thanks for your quick reply! 🚀

Any updates on this issue ?

[ArthurSalle]

Ok, I'll take a look at it, thanks for your quick reply! 🚀

Any updates on this issue ?

No, not yet 🤷🏼‍♂️

[CaseoJKL]

https://docs.astro.build/en/recipes/build-forms-api/

I wonder why it requires A UI Framework integration installed.
Can we not do this without a UI Framework integration ?

This will fix your issue but I don't want to use a UI Framework

[ArthurSalle]

Yes you can but it seems to be a lit bit more tricky without an ui framework.

If I submit my form "normally" by clicking my submit button every thing is okay. But then if I refresh the page my form is being submitted again and again. So, I've added a button with a name and a value.

---
if (Astro.request.method === "POST") {
  console.log("here"); // execute on the first submit & every time I refresh the page

try {
    const formData = await Astro.request.formData()
    const submitBtn = formData.get('submit');

    if (submitBtn === 'submit-btn') {
        console.log('log only when btn clicked') // execute only when the submit btn is clicked and never again
    }
 
} catch {}

}

---

<form method="POST">

//input 

 <button name="submit" value="submit-btn">Submit</button>
</form>

I hope it can help you ! If not, tell me more details about your problem !

[CaseoJKL]

It doesn't look reasonable as to why the issue is happening to begin with but rather a workaround.

[evokeapps]

I fixed it by adding a return Astro.redirect(REDIRECT_URL)