Question 35779 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to append "disable" attribute in button using React – Jquery

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>
Tags:

2

Answers


  1. 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} />
    Login or Signup to reply.
  2. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search