0

I am working on Reactjs/nextjs, And i want to append/remove "disable" attribute,how can i do this ? Here is my current code

const handleSubmit = (e) => {
    e.preventDefault();
    //Should append "disable" on submit button
    axios
    .post("xxxxxxxxxxxxxxxxxxxxxxxxxxx",data
    )
    .then(function (response) {
       //Should remove "disable" after response
    }
    });
}

<form className="row" id="home_contact_form" onSubmit={handleSubmit}>
<input type="submit" value="send" className="sendbtn" id="sendbtn" />
</form>
nick
  • 19
  • 4
  • Does this answer your question? [Disabling and enabling a html input button](https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button) – Neha Soni Dec 22 '22 at 11:39

2 Answers2

1

You should create a useState, setting true or false during the petition

example:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleSubmit = () => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => {
        setIsDisabled(true);
        return response.json();
      })
      .then((json) => console.log(json))
      .finally(() => setIsDisabled(false));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button disabled={isDisabled} onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
}
S.Marx
  • 977
  • 10
  • 14
0

You can create a boolean state for this job, initially, your state should be false when handleSubmit function is called then set the state to true and once you get the response back from the API then update the state to false again.

then you can simply use that state inside your input

<input type="submit" value="send" className="sendbtn" id="sendbtn" disabled={isDisabled} />
Lalit Joshi
  • 66
  • 4