From 2a4e9859487998ae46c34aff85972854fbb91cdd Mon Sep 17 00:00:00 2001 From: Ken Powers Date: Mon, 18 Dec 2023 19:35:59 -0500 Subject: [PATCH 1/3] Note non-standard behavior of view transitions for forms set to post https://github.com/withastro/astro/pull/9466 --- src/content/docs/en/guides/view-transitions.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index a56910039d588..60040a5e618b5 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -376,6 +376,14 @@ The `` router will trigger in-page transitions from `
` By default, your page will transition after a form is submitted, even if you are using `event.preventDefault()` to prevent this behavior. +Please note that if your method is set to `post`, the default behavior of web browsers is to submit your form data encoded as as `application/x-www-form-urlencoded`, but the default behavior of Astro is to submit your form data as `multipart/form-data`. If you want to match the default behavior of web browsers make sure to set the `enctype` attribute accordingly: + +```astro title="src/components/Form.astro" + + +
+``` + You can opt out of router transitions on any individual form using the `data-astro-reload` attribute: ```astro title="src/components/Form.astro" From b1de4f8b880784e8906fa1143180e69cd7fc22bd Mon Sep 17 00:00:00 2001 From: Ken Powers Date: Thu, 21 Dec 2023 10:42:10 -0500 Subject: [PATCH 2/3] Update src/content/docs/en/guides/view-transitions.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/view-transitions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index 60040a5e618b5..3642617ca3208 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -376,7 +376,7 @@ The `` router will trigger in-page transitions from `
` By default, your page will transition after a form is submitted, even if you are using `event.preventDefault()` to prevent this behavior. -Please note that if your method is set to `post`, the default behavior of web browsers is to submit your form data encoded as as `application/x-www-form-urlencoded`, but the default behavior of Astro is to submit your form data as `multipart/form-data`. If you want to match the default behavior of web browsers make sure to set the `enctype` attribute accordingly: +By default, Astro submits your form data as `multipart/form-data` when your `method` is set to `POST`. If you want to match the default behavior of web browsers, use the `enctype` attribute to submit your data encoded as `application/x-www-form-urlencoded`: ```astro title="src/components/Form.astro" From d97e0a8a1b4e99251cdf20352c004e5ae75d08da Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Thu, 21 Dec 2023 11:45:53 -0400 Subject: [PATCH 3/3] ALL CAPS style --- src/content/docs/en/guides/view-transitions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/view-transitions.mdx b/src/content/docs/en/guides/view-transitions.mdx index 3642617ca3208..027af7bfdb2cc 100644 --- a/src/content/docs/en/guides/view-transitions.mdx +++ b/src/content/docs/en/guides/view-transitions.mdx @@ -379,7 +379,7 @@ By default, your page will transition after a form is submitted, even if you are By default, Astro submits your form data as `multipart/form-data` when your `method` is set to `POST`. If you want to match the default behavior of web browsers, use the `enctype` attribute to submit your data encoded as `application/x-www-form-urlencoded`: ```astro title="src/components/Form.astro" - + ```