CODEWITHSUNDEEP
reactjsformik
Profer
Profer

Reputation: 643

Fromik clicking on another button on hitting enter

I have these two buttons inside my Formik form. Issue is when I hit enter it is clicking on my "Back" button despite it does not have type="submit".

<Formik
  initialValues={initialState}
  validationSchema={validationSchema}
  onSubmit={handleSubmit}
>
  {({ errors, touched, handleChange, setFieldValue, values }) => (
    <Form>
      <div className="field-block field-items mb-4">
        <label>
        Title <span className="required">*</span>
        </label>
      <div className="input-block">
      <Field
        className={touched.title && errors.title ? "error" : ""}
        name="title"
        type="text"
        placeholder="Add a title"
      />
    </div>
  </div>
      <div className="col-md-6">
        <div className="button-container large-btn text-md-end text-center">
          <button onClick={backFunction} className="btn-s-one">
            Back
          </button>
          <button type="submit" className="btn-s-one fill ms-2">
            Continue
            {props.loder == false ? (
              ""
            ) : (
              <Spin
                size="large"
                indicator={
                  <LoadingOutlined
                    style={{ fontSize: 50, color: "#000", marginLeft: 50 }}
                    spin
                  />
                }
                className="loader__full"
              ></Spin>
            )}
          </button>
        </div>
      </div>
    </Form>
  )}
</Formik>;

Upvotes: 0

Views: 84

Answers (1)

Pranta
Pranta

Reputation: 3695

Form Buttons in React.js are submit buttons by default. You need to change your back button code by the following.

  <button type="button" onClick={backFunction} className="btn-s-one">
    Back
  </button>

Upvotes: 1

Related Questions