CODEWITHSUNDEEP
reactjsdjango
JennyA
JennyA

Reputation: 46

Form onSubmit is not updating the page

**first time asking qn on stack overflow so i apologize if I didn't do it right hah...and I am a beginner in React so this question might sound silly haha!

So guys, my problem is that whenever I click on submit, it doesn't show any change and also the text on the form where you type title and content is still there. I tried using 'onSubmit' but it doesn't make any changes in my database and doesn't refresh the page either. So I used 'onSubmitCapture' and when I do so, doesn't show the change, doesn't empty the 'title' and 'content' that I typed in but in my Django Admin I can see that it added a new article or updated an existing one if I edited it. So, if i refresh it manually, I can see that it updated it, both while creating and updating an article. I couldn't find a solution for this because most problems are with the React app being refreshed every time the form is submitted. I was wondering if there is a way that I can empty the input fields and update the page too.

This is the code...I was watching a tutorial on a Youtube channel-JustDjango-...that's where I got it.

  import React from "react";
  import axios from "axios";
  import { Form, Input, Button } from "antd";

  class CustomForm extends React.Component {
    handleFormSubmit = (event, requestType, articleID) => {
      const title = event.target.elements.title.value;
      const content = event.target.elements.content.value;
      switch (requestType) {
        case "post":
          return axios.post("http://127.0.0.1:8000/api/", { title: title, content: content })
          .then((res) => console.log(res))
          .catch((err) => console.error(err));
        case "put":
          return axios.put(`http://127.0.0.1:8000/api/${articleID}/`, { title: title, content: content})
          .then((res) => console.log(res))
          .catch((err) => console.error(err));
      }
    };
    render() {
      return (
        <div>
          <Form 
            onSubmit={(event) =>
              this.handleFormSubmit(
                event,
                this.props.requestType,
                this.props.articleID
              )
            }
          >
            <Form.Item label="Title">
              <Input name="title" placeholder="Enter Title" />
            </Form.Item>
            <Form.Item label="Content">
              <Input name="content" placeholder="Enter Some Content..." />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                {this.props.btnText}
              </Button>
            </Form.Item>
          </Form>
        </div>
      );
    }
  }

  export default CustomForm;

Upvotes: 1

Views: 761

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

In most cases with uncontrolled forms you simply set the input values back to an empty string.

handleFormSubmit = (event, requestType, articleID) => {
  event.preventDefault();

  const title = event.target.elements.title.value;
  const content = event.target.elements.content.value;

  // Clear out entered data
  event.target.elements.title.value = "";
  event.target.elements.content.value = "";

  switch (requestType) {
    case "post":
      return axios
        .post("http://127.0.0.1:8000/api/", {
          title: title,
          content: content
        })
        .then((res) => console.log(res))
        .catch((err) => console.error(err));
    case "put":
      return axios
        .put(`http://127.0.0.1:8000/api/${articleID}/`, {
          title: title,
          content: content
        })
        .then((res) => console.log(res))
        .catch((err) => console.error(err));
  }
};

Demo

Edit form-onsubmit-is-not-updating-the-page

Upvotes: 0

Related Questions