Form submission not working

[lilyntalmers]

At first thank to all the developers who created and maintaining this amazing library. For quite some time I was trying to create a wizard form. I have tried and tested different libraries but till now Formiz is the best. It was easy to learn and very easy to set up.

So, I have created a three step wizard form using Formiz. First two steps works fine. But on the third step when I press the "submit" button, nothing happens. It doesn't submit the form.

My MyField.js File:

import React from "react";
import { useField } from "@formiz/core";

const MyField = (props) => {
  const {
    errorMessage,
    id,
    isValid,
    isPristine,
    isSubmitted,
    resetKey,
    setValue,
    value
  } = useField(props);
  const { label, type, required } = props;
  const [isFocused, setIsFocused] = React.useState(false);
  const showError = !isValid && !isFocused && (!isPristine || isSubmitted);

  return (
    <div className={`demo-form-group ${showError ? "is-error" : ""}`}>
      <label className="demo-label" htmlFor={id}>
        {label}
        {required && " *"}
      </label>
      <input
        key={resetKey}
        id={id}
        type={type || "text"}
        value={value || ""}
        className="demo-input"
        onChange={(e) => setValue(e.target.value)}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        aria-invalid={!isValid}
        aria-describedby={!isValid ? `${id}-error` : null}
      />
      {showError && (
        <div id={`${id}-error`} className="demo-form-feedback">
          {errorMessage}
        </div>
      )}
    </div>
  );
};

export default MyField;

My MyForm.js File:

import React, { useEffect } from "react";
import { Card, CardHeader, CardBody, CardFooter } from "reactstrap";
import { Formiz, FormizStep, useForm } from "@formiz/core";
import { isEmail } from "@formiz/validations";
import MyField from "./MyField";

const data = [
  {
    category: "Beaf",
    helptext: "This is a demo text and it means nothing",
    options: [
      {
        subCategory: "Cheap Beaf",
        price: 10,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      },
      {
        subCategory: "Expensive Beaf",
        price: 20,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      }
    ]
  },
  {
    category: "cheese",
    options: [
      {
        subCategory: "Cheap Cheese",
        price: 10,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      },
      {
        subCategory: "Expensive Cheese",
        price: 20,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      }
    ]
  },
  {
    category: "bread",
    options: [
      {
        subCategory: "Cheap Bread",
        price: 10,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      },
      {
        subCategory: "Expensive Bread",
        price: 20,
        radioImage: "https://www.xul.fr/en/css/images/20.jpg"
      }
    ]
  }
];

const MyForm = () => {
  const [selectedPrice, setSelectedPrice] = React.useState({
    beaf: 0,
    cheese: 0,
    bread: 0
  });

  const [totalPrice, setTotalPrice] = React.useState(0);

  useEffect(() => {
    let initialPrices = {};

    data.forEach(({ category, options }) => {
      initialPrices = {
        ...initialPrices,
        [category]: options[0].price
      };
    });

    setSelectedPrice(initialPrices);
  }, []);

  useEffect(() => {
    const finalPrice = Object.keys(selectedPrice)
      .map((key) => selectedPrice[key])
      .reduce((total, num) => total + num);

    setTotalPrice(+finalPrice);
  }, [selectedPrice]);

  const handleOnChange = (e) => {
    const { name, value } = e.target;

    setSelectedPrice((prevState) => ({
      ...prevState,
      [name]: +value
    }));
  };
  const myForm = useForm();

  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Formiz connect={myForm} onValidSubmit={handleSubmit}>
      <form
        action="https://formsubmit.co/lilyntalmers@gmail.com"
        method="POST"
        noValidate
        onSubmit={myForm.submitStep}
      >
        <input
          className="form-control"
          name={totalPrice}
          type="text"
          placeholder="Readonly input here…"
          value={totalPrice}
          readOnly
        />
        <input type="hidden" name="_captcha" value="false" />
        <FormizStep name="step1">
          {data.map(({ category, helptext, options }) => {
            return (
              <Card className="m-2">
                <div className="form-group" key={category}>
                  <CardHeader className="mypurple h4 font-weight-bold text-center">
                    <label>{category}</label>
                  </CardHeader>
                  <CardBody>
                    {options.map(({ subCategory, price, radioImage }, i) => {
                      return (
                        <div className="form-check  form-check-inline" key={i}>
                          <label
                            className="form-check-label"
                            htmlFor={`${category}-${i + 1}`}
                          >
                            <input
                              className="form-check-input"
                              type="radio"
                              name={category}
                              id={`${category}-${i + 1}`}
                              value={price}
                              checked={selectedPrice[category] === price}
                              onChange={(e) => handleOnChange(e)}
                            />
                            <img src={radioImage} alt="#" />
                            <div className="font-weight-bold">
                              {subCategory}
                            </div>
                          </label>
                        </div>
                      );
                    })}
                  </CardBody>
                </div>
                <CardFooter className="mypurple font-weight-bold">
                  {helptext}
                </CardFooter>
              </Card>
            );
          })}
        </FormizStep>

        <FormizStep name="step2">
          <div className="form-group">
            <label for="DeviceType">
              Select Your Device
              <select
                className="form-control"
                id="DeviceType"
                name="DeviceType"
              >
                <option selected>Choose...</option>
                <option>Android</option>
                <option>iPhone</option>
                <option>iPad</option>
              </select>
            </label>
          </div>
          <div className="form-row">
            <div className="form-group col-md-4">
              <MyField
                name="country"
                label="Country"
                placeholder="Your Country"
                required="Your Country Name Is Required"
                className="form-control"
                autoComplete="on"
              />
            </div>
            <div className="form-group col-md-4">
              <MyField
                name="city"
                label="City"
                placeholder="Your City"
                required="Your City Name Is Required"
                className="form-control"
                autoComplete="on"
              />
            </div>
            <div className="form-group col-md-4">
              <MyField
                name="zipcode"
                label="Zip Code"
                placeholder="Your Zip Code"
                required="Your Zip Code Is Required"
                className="form-control"
                autoComplete="on"
              />
            </div>
          </div>
        </FormizStep>

        <FormizStep name="step3">
          <MyField
            name="email"
            label="Email"
            validations={[
              {
                rule: isEmail(),
                message: "This is not a valid email"
              }
            ]}
          />
        </FormizStep>

        {/* Update the submit button to allow navigation between steps. */}
        {!myForm.isFirstStep && (
          <button
            type="button"
            className="btn btn-dark"
            onClick={myForm.prevStep}
          >
            Back
          </button>
        )}
        {myForm.isLastStep ? (
          <button
            type="submit"
            className="btn btn-warning"
            disabled={!myForm.isValid}
          >
            Submit
          </button>
        ) : (
          <button
            type="submit"
            className="btn btn-light"
            disabled={!myForm.isStepValid}
          >
            Continue
          </button>
        )}
      </form>
    </Formiz>
  );
};

export default MyForm;

Here is the Code Sandbox Link

If the form is submitted correctly the it should redirect to this page:

As my form endpoint I am using formsubmit.co. For styling I am using Bootstrap.

I'm stuck. Any help will be really appriciated.

-Lily

[ivan-dalmet]

Hello Lily 😃
You will need to handle the POST with fetch :)

1. Remove the

<form
  // action="https://formsubmit.co/lilyntalmers@gmail.com" // Remove this
  // method="POST" // Remove this
  noValidate
  onSubmit={myForm.submitStep}
>

2. Handle the POST in the handleSubmit

const handleSubmit = (values) => {
  fetch(`https://formsubmit.co/lilyntalmers@gmail.com`, {
    method: "POST",
    body: values
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data)
      alert('Success');
    })
    .catch(() => {
      alert('Error');
    });
};

Other things you have some errors in the console that you should fix ;)

And also if you order to get the values of the radio buttons and the select, each should be a field ;)

You can see here an example of FieldRadios (https://github.com/BearStudio/start-ui/blob/master/src/components/FieldRadios/index.tsx) and FieldSelect (https://github.com/BearStudio/start-ui/blob/master/src/components/FieldSelect/index.tsx) in this repository.
This examples are done with Chakra UI (I recommend this lib a lot ^^) but you can use any UI library instead ;)

I hope this can help 😉
Don't hesitate if you still struggle with it 😊

[lilyntalmers]

To be honest, I have no idea what I am doing right now. LOL. But it's still not submitting the information. Sorry.

[ivan-dalmet]

Ok if I look at the documentation maybe you need to add headers ^^

Try this

const handleSubmit = (values) => {
    console.log(values)
    fetch(`https://formsubmit.co/lilyntalmers@gmail.com`, {
      method: "POST",
      // Udpate the headers here ⬇️
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
         name: `From ${values?.email || 'no email'}`,
         message: JSON.stringify(values, null, 2),
      }),
    })
      .then((data) => {
        console.log(data);
        alert("Success");
      })
      .catch(() => {
        alert("Error");
      });
  };

If it still not working, try this ^^ (this is the example from the FormSubmit documentation)

const handleSubmit = (values) => {
    console.log(values)
    fetch("https://formsubmit.co/lilyntalmers@gmail.com", {
      method: "POST",
      headers: { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
      },
      body: JSON.stringify({
          name: "FormSubmit",
          message: "I'm from Devro LABS"
      })
    })
    .then(data => console.log(data))
    .catch(error => console.log(error));
  };

[ivan-dalmet]

In your code sandbox it seems to work with the updated code but I get the following message

[lilyntalmers]

It worked. But now I am facing a new kind of problem.

As you can see it is only submitting the input field values but not the radio button values. I am suspecting it is happening because the radio buttons are not created using Fomiz format. So, as per your suggestion I have added fieldradio.js. Here is what inside fieldradio.js:

import React, { ReactNode, useEffect, useState } from 'react';
import { useField } from '@formiz/core';


const FieldRadios = (props) => {
  const {
    errorMessage,
    id,
    isValid,
    isSubmitted,
    resetKey,
    setValue,
    value,
    otherProps,
  } = useField(props);
  const {
    children,
    label,
    options = [],
    required,
    helper,
    ...rest
  } = otherProps;
  const [isTouched, setIsTouched] = useState(false);
  const showError = !isValid && (isTouched || isSubmitted);

  useEffect(() => {
    setIsTouched(false);
  }, [resetKey]);

  return (
    <FormGroup {...formGroupProps}>
      <RadioGroup id={id} value={value || []} onChange={setValue}>
        <Wrap spacing="4">
          {options.map((option) => (
            <WrapItem key={option.value}>
              <Radio
                id={`${id}-${option.value}`}
                name={option.value}
                value={option.value}
                colorScheme="brand"
              >
                {option.label ?? option.value}
              </Radio>
            </WrapItem>
          ))}
        </Wrap>
      </RadioGroup>
      {children}
    </FormGroup>
  );
};

export default FieldRadios;

I have also updated my Code Sandbox.

I need to change this part to Formiz format:

<div className="form-check  form-check-inline" key={i}>
  <label
    className="form-check-label"
    htmlFor={`${category}-${i + 1}`}
  >
  <input
    className="form-check-input"
    type="radio"
    name={category}
    id={`${category}-${i + 1}`}
    value={price}
    checked={selectedPrice[category] === price}
    onChange={(e) => handleOnChange(e)}
  />
  <img src={radioImage} alt="#" />
  <div className="font-weight-bold">{subCategory}</div>
  </label>
</div>

I have working for hours to solve this problem but there is no way I can fix it. Can you please help me fix this too?

[ivan-dalmet]

Hey Lily you need to create a proper FieldRadiosCards component

The component

import React from "react";
import { useField } from "@formiz/core";
import { Card, CardBody, CardImg, FormFeedback, FormGroup, Input, Label } from "reactstrap";

const FieldRadiosCards = (props) => {
  const {
    errorMessage,
    id,
    isValid,
    setValue,
    value
  } = useField(props);
  const { label, required, options } = props;

  return (
    <FormGroup>
      <Label htmlFor={id}>
        {label}
        {required && " *"}
      </Label>
      {options?.map((option) => (
        <Card style={{ maxWidth: 200 }} key={option}>
          <Label>
            <CardImg top width="100%" src={option.image} alt={option.label} />
            <CardBody>
              <Input
                invalid={!isValid}
                onChange={(e) => setValue(e.target.value)}
                type="radio"
                name={id}
                value={option.value}
                checked={value === option.value}
              />
              {option.label}
            </CardBody>
          </Label>
        </Card>
      ))}
      {!isValid && (
        <FormFeedback id={`${id}-error`}>{errorMessage}</FormFeedback>
      )}
    </FormGroup>
  );
};

export default FieldRadiosCards;

How to use in your form

<FieldRadiosCards
    name="category"
    label="Choose a category"
    required="This is required"
    options={data
      .flatMap((d) => d.options)
      .map((d) => ({
        label: `${d.subCategory} $${d.price}`,
        image: d.radioImage,
        value: d.subCategory,
      }))}
  />

Also, not Formiz related, but you should import the Bootstrap css from reactstrap in your App.js 😉

import 'bootstrap/dist/css/bootstrap.min.css';

Tell me if it helps 😉

[lilyntalmers]

Thank you Ivan, It worked. I just had to modify the code a little bit. I am writing down the changes I made so it can helpful to anyone who is facing the same problem.

  const handleSubmit = (values) => {
    console.log(values)
    fetch(`https://formsubmit.co/ajax/lilyntalmers@gmail.com`, {
      method: "POST",
      // Udpate the headers here ⬇️
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
         name: `From ${values?.email || 'no email'}`,
         message: JSON.stringify(values, null, 2),
      }),
    })
      .then((data) => {
        console.log(data);
        alert("Success");
      })
      .catch(() => {
        alert("Error");
      });
  };

Instead of using https://formsubmit.co/lilyntalmers@gmail.com I had to use https://formsubmit.co/ajax/lilyntalmers@gmail.com.

It also works without the following code:

headers: { 
  'Content-Type': 'application/json',
  'Accept': 'application/json'
},

[ivan-dalmet]

Nice! Good catch!
Thanks for giving the answer for future users 😊👍

Feel free to ask if you have other question on Formiz 🤗