Unable to post form data using Reactjs

Question

I am working with Reactjs and i am using nextjs,Right now i am trying to Post Form data But Unable to get any response(even anything in console.log),I tried with following code in index.js but nothing works,Thank you in advance

import { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { useEffect, useState } from "react";
import styles from "../styles/Home.module.css";
import Link from 'next/link'
import Script from 'next/script'
import ReactDOM from 'react-dom';
import axios from "axios";

//const Home: NextPage = () => {
const Home = () => {
  const [state, setState] = useState({
    name: "",
    job: ""
  });
  const handleChange = (e) => {
    console.log('Om Success')
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value
    });
  };

  const handleSubmit = (e) => {
     
    e.preventDefault();
    console.log("Om Success");
    const userData = {
      name: state.name,
      job: state.job
    };
    axios.post("https://xxxxxxx.com/api/users", userData).then((response) => {
      console.log(response.status);
      console.log(response.data);
    });
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">
          Name
          <input
            type="text"
            name="name"
            value={state.name}
            onChange={handleChange}
          />
        </label>
        <label htmlFor="job">
          Job
          <input
            type="text"
            name="job"
            value={state.job}
            onChange={handleChange}
          />
        </label>
        <button type="submit">Register</button>
      </form>
    </>
  );
};

export default Home;

Right click page, choose "Inspect" and go to the "Network" tab and then click the submit button. See if it's actually making the request and what response is received. — Rocky Sims
– Rocky Sims, Commented Nov 11, 2022 at 7:01
if "Om Success" not printing then try changining onSubmit={handleSubmit} to onSubmit={this.handleSubmit} — Bobby Thomas
– Bobby Thomas, Commented Nov 11, 2022 at 7:04
you might want to add this header when you are sending an object with a post method in axios : headers: {"Content-Type": "multipart/form-data",}, — julBayonna
– julBayonna, Commented Nov 11, 2022 at 7:05
Also, something very simple that we all forget from time to time: make sure your file is saved, and that your project is running :) — julBayonna
– julBayonna, Commented Nov 11, 2022 at 7:08

Saeed Mansoori · Accepted Answer · 2022-11-12 09:33:12Z

1

you can post axios data by using FormData() like:

const formData= new FormData();

And then add the fields to the form you want to send:

formData.append('name', state.name);
formData.append('job', state.job);

axios({
  method: "post",
  url: "your url",
  data: formData,
}).then((response) => {
      console.log(response.status);
      console.log(response.data);
    });

answered Nov 12, 2022 at 9:33

Saeed Mansoori

4496 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to post form data using Reactjs

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related