Source:  Twitter logo

I'm trying to submit the form by using the external buttons which are located outside of <Form> or <Formik> tags

As shown in the following screenshot, my button is in Bootstrap > Modal Footer section and they are outside of form tag. I'm trying to submit the form when the user clicks on the Submit button.

Please see the similar code as the following. I uploaded it onto CodeSandbox.

function App() {
      return (
        <div className="App">
          <Formik
            initialValues={{
              date: '10/03/2019',
              workoutType: "Running",
              calories: 300
            }}
            onSubmit={values => {
              console.log(values);
            }}
            render={({ values }) => {
              return (
                <React.Fragment>
                  <Form>
                    Date: <Field name="date" />
                    <br />
                    Type: <Field name="workoutType" />
                    <br />                
                    Calories: <Field name="calories" />
                    <br />  
                    <button type="submit">Submit</button>
                  </Form>
                  <hr />
                  <br />
                  <button type="submit" onClick={() => this.props.onSubmit}>
                    Button Outside Form
                  </button>
                </React.Fragment>
              );
            }}
          />
        </div>
      );
    }

Since the button is outside of the form, it doesn't trigger Submit behaviour and I don't know how to connect this button's action and Formik OnSubmit method. If I moved that button inside form tag, it works as expected and I don't have to do anything special.

I tried to follow this SO's post React Formik use submitForm outside . But I really couldn't figure out how it works.

I tried to bind the button click action like onClick={() => this.props.onSubmit} as mentioned in the post. But it's not doing anything or showing any error.

Could you please help me how I can bind the Submit button outside of the form with 'OnSubmit' function in Formik?

It appears you have access to the submitForm method as a property of the argument passed to the render function. Simply call that with the button's onClick handler...

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}
14 users liked answer #0dislike answer #014
cantuket profile pic
cantuket

Formik's render give you a callback param handleSubmit. Assign this to the <button.

Since your button is not in the form, change its type to <button type="button"... and assign the onClick to onClick={handleSubmit}

Update the render as follow,

render={({ values, handleSubmit }) => {
  return (
    <React.Fragment>
      <Form>
        Date: <Field name="date" />
        <br />
        Type: <Field name="workoutType" />
        <br />
        Calories: <Field name="calories" />
        <br />
        <button type="submit">Submit</button>
      </Form>
      <hr />
      <br />
      <button type="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}
4 users liked answer #1dislike answer #14
Ponleu profile pic
Ponleu

This is because the handleSubmit function is never called, replace onClick={() => this.props.onSubmit} with onClick={props.handleSubmit}

edit: since it looks like you need a little more directions, here is an edited version of the linked code sandbox, the correct prop is handleSubmit and you need to destructure it from the props just like you did with values.

https://codesandbox.io/s/qz2jnlp929

1 users liked answer #2dislike answer #21
Jose Munoz profile pic
Jose Munoz

Just use onClick={handlesubmit} in your external Button component making sure to destructure the handlesubmit function from the Formik component. Please have a look;

<Formik
initialValues={{field: true}}
onSubmit={() => console("Submited via my onSubmit function")}
>

{({ handleSubmit }) => (

  <Form>
          <Field
            name="field"
            placeholder="Date"
          />
  </Form>

  <Button type="submit" onClick={handleSubmit}>
    Save
  </Button>

</Formik>
-3 users liked answer #3dislike answer #3-3
Augusto Santana profile pic
Augusto Santana

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).