Error: Form submission canceled because the form is not connected

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) => {
    
    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>
    </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.



Read more here: https://stackoverflow.com/questions/66327333/error-form-submission-canceled-because-the-form-is-not-connected

Content Attribution

This content was originally published by timman at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: