A note on form submission with <WhenVisible> components

Author: pascalbaljet

resources/js/Pages/load-when-visible.jsx

@@ -7,6 +7,7 @@ export const meta = {
     { url: '#top', name: 'Introduction' },
     { url: '#loading-before-visible', name: 'Loading before visible' },
     { url: '#always-trigger', name: 'Always trigger' },
+    { url: '#form-submissions', name: 'Form submissions' },
   ],
 }
 
@@ -414,6 +415,135 @@ export default function () {
           },
         ]}
       />
+      <H2>Form submissions</H2>
+      <P>
+        When submitting forms, you may want to use the <Code>except</Code> option to exclude the props that are being
+        used by the <Code>WhenVisible</Code> component. This prevents the props from being reloaded when you get
+        redirected back to the current page because of validation errors.
+      </P>
+      <TabbedCode
+        examples={[
+          {
+            name: 'Vue',
+            language: 'markup',
+            code: dedent`
+            <script setup>
+            import { useForm, WhenVisible } from '@inertiajs/vue3'
+
+            const form = useForm({
+                name: '',
+                email: '',
+            })
+
+            function submit() {
+                form.post('/users', {
+                    except: ['permissions'],
+                })
+            }
+            </script>
+
+            <template>
+                <form @submit.prevent="submit">
+                    <!-- ... -->
+                </form>
+
+                <WhenVisible data="permissions">
+                    <!-- ... -->
+                </WhenVisible>
+            </template>
+            `,
+          },
+          {
+            name: 'React',
+            language: 'jsx',
+            code: dedent`
+            import { useForm, WhenVisible } from '@inertiajs/react'
+
+            export default function CreateUser() {
+                const { data, setData, post } = useForm({
+                    name: '',
+                    email: '',
+                })
+
+                function submit(e) {
+                    e.preventDefault()
+                    post('/users', {
+                        except: ['permissions'],
+                    })
+                }
+
+                return (
+                    <>
+                        <form onSubmit={submit}>
+                            {/* ... */}
+                        </form>
+
+                        <WhenVisible data="permissions">
+                            {/* ... */}
+                        </WhenVisible>
+                    </>
+                )
+            }
+            `,
+          },
+          {
+            name: 'Svelte 4',
+            language: 'jsx',
+            code: dedent`
+            <script>
+                import { useForm, WhenVisible } from '@inertiajs/svelte'
+
+                const form = useForm({
+                    name: '',
+                    email: '',
+                })
+
+                function submit() {
+                    $form.post('/users', {
+                        except: ['permissions'],
+                    })
+                }
+            </script>
+
+            <form on:submit|preventDefault={submit}>
+                <!-- ... -->
+            </form>
+
+            <WhenVisible data="permissions">
+                <!-- ... -->
+            </WhenVisible>
+            `,
+          },
+          {
+            name: 'Svelte 5',
+            language: 'jsx',
+            code: dedent`
+            <script>
+                import { useForm, WhenVisible } from '@inertiajs/svelte'
+
+                const form = useForm({
+                    name: '',
+                    email: '',
+                })
+
+                function submit() {
+                    form.post('/users', {
+                        except: ['permissions'],
+                    })
+                }
+            </script>
+
+            <form onsubmit={submit}>
+                <!-- ... -->
+            </form>
+
+            <WhenVisible data="permissions">
+                <!-- ... -->
+            </WhenVisible>
+            `,
+          },
+        ]}
+      />
     </>
   )
 }