Use `action` attribute on `form` element.

Bug, Feature, or Question?

Question

Stupid question but is it possible to use action='/api' method='POST' instead of ajax? I am trying to use it but its not working for me. Is there a prop I have to supply?

• Formik Version: 0.11.11
• React Version: 16.2.0
• TypeScript Version: N/A
• CodeSandbox Link: N/A
• OS: Mac OS X 10.13.3
• Node Version: 8.0.0
• Package Manager and Version: NPM, 5.8.0

[seanconnollydev]

I feel sorry for anyone who stumbles across this thread because they are in for a world of confusion.

The answer to the original questions is yes you can use action='/api' method='POST' instead of ajax and the working demo is here: https://codesandbox.io/s/826qv6lv7l ✌️

[seanconnollydev]

What’s the point in using Formik if you don’t want to submit your form data with JavaScript?

Glad you asked! Straight from Formik’s README:

Formik is a small library that helps you with the 3 most annoying parts:
1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

Even when using HTML forms, one can still draw value from Formik for 1 and 2.

Formik puts your from values in memory so you can use them easily with JS/React. If you want to do a regular form POST action it will use the values that are in the DOM. These are two completely different things and you can’t mix them together.

I disagree with your premise here. Formik is an extension of React and React is designed to control the DOM. Even the React Forms docs show that React itself doesn’t get in the way of initiating the default form submission event. Quite the opposite in fact, because you the developer need to explicitly call e.preventDefault() if you want to handle the form submission via xhr.

One reason why Formik prevents the default form submission is because Formik supports asynchronous validation via the validate function. If the form’s onSubmit returns, then the default submission would occur before the async validation has a chance to run. Given that, the only way that I can see to use Formik with HTML form posts is to submit the form via javascript yourself:

const formEl = useRef(null);

...

 const handleSubmit = values => {
  formEl.current.submit();
};

...

<form action="/path" ref={formEl}> ...

Full demo here: https://codesandbox.io/s/826qv6lv7l