5

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.

dhruw lalan
  • 791
  • 1
  • 11
  • 23
timman
  • 479
  • 5
  • 14

2 Answers2

3

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.

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

const handleSubmit = (e) => {
  e.preventDefault();
  ...
}
ksav
  • 20,015
  • 6
  • 46
  • 66
  • Changing the button type to button means that when I hit submit, nothing happens. I added e.preventDefault(); also and this error goes away, so that is cool - thank you. However, the value is not rendered, I get internal server error in JS console, and AttributeError: 'NoneType' object has no attribute 'upper' in terminal. Any thoughts? – timman Feb 23 '21 at 05:41
  • 2
    @timman: Your error is in the python backend. You asked a question tagged javascript. If you need help debugging the flask app, post a new question. – Håken Lid Feb 23 '21 at 05:48
  • yep, will do. thanks for getting me this far. – timman Feb 23 '21 at 05:51
  • Looks like your form is now submitting correctly. I agree with @HåkenLid. I would ask a new question about how to handle the request and extract data on the server end tagged with `python` & `flask`. – ksav Feb 23 '21 at 05:53
  • 2
    You could try changing `request.form` to `request.json` or make axios post form data instead of json. – Håken Lid Feb 23 '21 at 05:56
  • Nice answer here for Geting the data received in a Flask request https://stackoverflow.com/a/16664376/5385381 – ksav Feb 23 '21 at 05:59
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

danday74
  • 52,471
  • 49
  • 232
  • 283
  • 1
    I had to specify the type as button even though I was using a button element. e.g., `` – Ethan Lemke Nov 18 '22 at 23:19