solid-router icon indicating copy to clipboard operation
solid-router copied to clipboard

Form component

Open SarguelUnda opened this issue 10 months ago • 4 comments

Summary

This PR does 2 things:

  • better method detection for action. If the formmethod attribute is present, use it instead of the form element.
  • add a Form component that could be compared to the A element i.e. does spa routing instead of native browser behaviors

Consideration

To achieve this we use the same trick as action which is to globally register the form element in a Set. We register it by ref but we could consider to use solidjs createUniqueId if we prefere to use string instead of dom node.

Example usage

Example app: https://github.com/SarguelUnda/solidrouter-pr-form

import { Form, action } from '@solidjs/router';

const myAction = action(async (data: FormData) => {
  console.log("ACTION")
});


const MyForm = () => {
  return <Form action={myAction} method="post">
    <input name="foo" />
    <input name="bar" />
    <button type="submit">POST ME</button>
    <button name="getsubmit" type="submit" formMethod='get' formAction="newr?azeizaei=1" >GET ME</button>
  </Form>
}

SarguelUnda avatar Apr 24 '24 14:04 SarguelUnda