DEV Community

Aashutosh Poudel
Aashutosh Poudel

Posted on

3 1

Issue with multiple buttons in Formik form

Here's an example codesandbox with a Formik.

https://codesandbox.io/embed/focused-ully-opvvmv?fontsize=14&hidenavigation=1&theme=dark

The form has two buttons: a Submit button that submits the form and navigates to the next page and a Copy button that copies the link typed by the user.

The problem:
When the Copy button is pressed the form is submitted and the page redirects to the next page. We only want the form to be submitted when the Submit button is pressed.

The solution:
Image description
By default any button without a type attribute defaults to type="submit". This causes the form to be submitted when the Copy button is pressed. To resolve this we need to explicitly pass the type attribute as button ie. type="button" for the Copy button.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay