Disclaimer re potential duplicates: There have been similar questions to mine and I think I have read pretty much all of those answers by now but none of them solved the issue for me.

I've got an app, frontend is React, and backend is a flask server. I'm having a major issue. The code seems to check out for both front- and backend, but after I click the submit button of a form, I get the error in the JS console: Form submission canceled because the form is not connected.

Now, there is only one button on my Form, and this is of type submit, with the handleSubmit handler in the form tag, so I don't think this is causing the issue. I also added this config object to handle potential CORS faults but I'm not getting any CORS errors at least.

React Form Component code:

import React, { useState } from "react";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { TextField } from "@material-ui/core";
import DisplayUpper from "./DisplayUpper";

function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    setSubmitted(true);

    console.log("button clicked");

    const config = {
      headers: { "Access-Control-Allow-Origin": "*" },
    };

    axios
      .post(
        "http://localhost:5000/process",
        {
          inputText: inputText,
        },
        config
      )
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit} method="post">
        <label>
          Enter Text :
          <TextField
            multiline={true}
            variant="outlined"
            name="inputText"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
          />
        </label>
        <Button variant="contained" color="primary" type="submit" name="Submit">
          SUBMIT
        </Button>
      </form>
      {isSubmitted && <DisplayUpper />}
    </div>
  );
}

export default Form;

Then, the app.py code:

@app.route('/process', methods=['POST'])
def result():
    text = request.form.get('inputText')
    upper_text = text.upper()
    print(upper_text)
    return upper_text

I set proxy: "http://localhost:5000" in package.json.

Disclaimer re potential duplicates: There have been similar questions to mine and I think I have read pretty much all of those answers by now but none of them solved the issue for me.

I've got an app, frontend is React, and backend is a flask server. I'm having a major issue. The code seems to check out for both front- and backend, but after I click the submit button of a form, I get the error in the JS console: Form submission canceled because the form is not connected.

Now, there is only one button on my Form, and this is of type submit, with the handleSubmit handler in the form tag, so I don't think this is causing the issue. I also added this config object to handle potential CORS faults but I'm not getting any CORS errors at least.

React Form Component code:

import React, { useState } from "react";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { TextField } from "@material-ui/core";
import DisplayUpper from "./DisplayUpper";

function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    setSubmitted(true);

    console.log("button clicked");

    const config = {
      headers: { "Access-Control-Allow-Origin": "*" },
    };

    axios
      .post(
        "http://localhost:5000/process",
        {
          inputText: inputText,
        },
        config
      )
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit} method="post">
        <label>
          Enter Text :
          <TextField
            multiline={true}
            variant="outlined"
            name="inputText"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
          />
        </label>
        <Button variant="contained" color="primary" type="submit" name="Submit">
          SUBMIT
        </Button>
      </form>
      {isSubmitted && <DisplayUpper />}
    </div>
  );
}

export default Form;

Then, the app.py code:

@app.route('/process', methods=['POST'])
def result():
    text = request.form.get('inputText')
    upper_text = text.upper()
    print(upper_text)
    return upper_text

I set proxy: "http://localhost:5000" in package.json.

• javascript
• reactjs

2 Answers 2

I got this warning when I had a button inside a form tag - the button click handler navigated away from the page

The default behaviour for a button inside a form is type="submit"

The warning disappeared when I changed the button to type="button"

In my case, I did not want the button to submit the form anyway - Otherwise if the button is meant to submit the form then use @ksav's answer

The browser is attempting to submit your form to the current URL via the method on the form when the button of type="submit" inside it is being clicked.

Note: if you don't set a type attribute on your <button>, the default value of submit will be used.

As you are handling the form submission with javascript, you should prevent the form's default behaviour:

const handleSubmit = (e) => {
  e.preventDefault();
  ...
}