Formik Form Not submitting from Modal Component

user_11604356 0
Viewed 1763

A have some form field that is on the Normal Page and on a Modal, i want the Modal button to trigger the submit event. Whenever i use the submit type="submit" on the Modal button, i get no resposnse. But if i use it in the Normal page button it works. Please what's going on, can't i use it in the Modal.

  <Formik
    initialValues={{
      productName: "",
      productNumber: "",
      quantity: 1,
      unitCost: 0,
      totalCost: 0,
      customerName: "",
      customerNumber: "",
      amount: "",
    }}
    onSubmit={(data, { setSubmitting }) => {
      setSubmitting(true);
      setTimeout(() => {
        console.log(data);
        alert(JSON.stringify(data, null, 2));
        setSubmitting(false);
      }, 2000);
    }}
  >
    {({
      values,
      handleBlur,
      handleChange,
      setFieldValue,
      isSubmitting,
    }) => (
      <Form>
        <Box>
          <Grid templateColumns="repeat(2, 1fr)" gap={5}>
            <Box>
              <FormLabel>Product Name:</FormLabel>
              <Field
                as={Input}
                name="productName"
                type="text"
                placeholder="Product Name:"
              />
            </Box>
            <Box>
              <FormLabel>Product Number:</FormLabel>
              <Field
                as={Input}
                name="productNumber"
                type="number"
                placeholder="Product Number:"
              />
            </Box>
            <Box>
              <FormLabel>Quantity:</FormLabel>
              <Field
                as={Input}
                name="quantity"
                type="number"
                value={values.quantity}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Quantity:"
              />
            </Box>
            <Box>
              <FormLabel>Unit Cost:(in Naira)</FormLabel>
              <Field
                as={Input}
                name="unitCost"
                type="number"
                value={values.unitCost}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="Unit Cost:"
              />
            </Box>
            <Box>
              <FormLabel>Total Cost:(in Naira)</FormLabel>
              <CalculatedField
                type="number"
                name="totalCost"
                values={values}
                value={values.totalCost}
                setFieldValue={setFieldValue}
                onChange={handleChange}
                onBlur={handleBlur}
              />
            </Box>
          </Grid>

          <Button mt={4} colorScheme="green" onClick={openIt} isFullWidth >
            // If used here, it will work... but i don't want to use it here
            Order Now
          </Button>
        </Box>

        <Modal closeOnOverlayClick={true} isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <Box>
                <Grid templateColumns="repeat(2, 1fr)" gap={5}>
                  <Box>
                    <FormLabel>Customer Name: </FormLabel>
                    <Field
                      as={Input}
                      name="customerName"
                      type="text"
                      placeholder="Customer Name:"
                    />
                  </Box>

                  <Box>
                    <FormLabel>Customer Number: </FormLabel>
                    <Field
                      as={Input}
                      name="customerNumber"
                      type="text"
                      placeholder="Customer Number:"
                    />
                  </Box>

                  <Box>
                    <FormLabel>Amount: </FormLabel>
                    <Field
                      as={Input}
                      name="amount"
                      type="text"
                      placeholder="Amount:"
                    />
                  </Box>
                </Grid>
              </Box>
            </ModalBody>

            <ModalFooter>
              <Button colorScheme="green" type="submit" >
               // i want to use it here
                Pay Now
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Form>
    )}
  </Formik>
chakra-ui formik reactjs javascript
1 Answers

I don't really understand what you want exactly, but if you want to trigger the submit, you could do with your normal button.

First of all, pass submitForm or handleSubmit as props with your others ones

 {({
     submitForm or handleSubmit,
      values,
      handleBlur,
      handleChange,
      setFieldValue,
      isSubmitting,
    }) => (

Then on your butotn, remove the type submit and add an event handler on click

<Button colorScheme="green" onClick={submitForm // or handleSubmit}>
  Pay Now
</Button>

Im sorry i don't know 100% which one will work, it's been a while im not using React an formik.

But remember, when something not working like you want, try to thing another way to do it. Typically trigger the submit manually with an event handler

user_120316480
Related