score:0
you can achieve that using two states
in your component
. one for input
and another for the button
.
const app = () => {
const [input, setinput] = usestate('') // for input
const [isdisabled, setisdisabled] = usestate(false) // for button
// when input is changing this function will get called
const onchange = (e) => {
setinput((prevstate) => (e.target.value))
if(e.target.value.trim().length < 1) { // checking the length of the input
setisdisabled(true) // disabling the button if length is < 1
} else {
setisdisabled(false)
}
}
const onsubmit = (e) => {
e.preventdefault()
// code...
}
return (
<div classname="app">
<form onsubmit={onsubmit}>
<input type='text' placeholder='email' value={input} onchange={onchange} />
<button id='button' type='submit' disabled={isdisabled}>submit</button>
</form>
</div>
);
}
if you have multiple inputs
change the onchange
function and input state
accordingly.
Source: stackoverflow.com
Related Query
- React how to disable submit button until form values are input
- How to disable form submit button until all input fields are filled?! ReactJS ES2015
- How to disable form submit button until all input fields are filled in ReactJS?
- How to Reset the dropdown values on form submission, Other Input values are getting Cleared in React Hooks
- Disable submit button in React functional component if all input fields are not completed
- How to disable submit button until form is filled and valid in javascript?
- React - Disable button in Ant Design form until all required fields are filled
- How to disable submit input field until all required fields and checkboxes are empty
- How to disable Submit button outside the Antd Form when the fields are invalid?
- How to update fields in input form when values are changed in react
- React formik form validation: How to initially have submit button disabled
- How to clear input values of dynamic form in react
- React antd form disable submit button
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to disable react button until Meteor Method finishes
- disable form submit button until user checks recaptcha checkbox
- How to disable button on submit form in formik?
- How to disable button according to input length by using React useState?
- React how to trigger form submit on input blur?
- how to test button that call submit form using jest and react testing library
- react formik disable submit button with form validity
- How to hide button until all fields are populated in react with hooks
- How to pass input value on form submit in react
- React Webpack - Submit Button not retrieving input value on form submit
- How to disable a submit button in redux form for the second time after the form is submitted for the first time?
- How to disable a button when the state or the input value gets changed in React JS?
- How to validate Form in React by pressing submit button
- how to render input values on button click react
- How to disable submit button in modal where the form is children ReactJS
- How to make form not refresh with custom submit button in React
More Query from same tag
- React Formik updating one field based on another
- Looping through an array in ReactJs
- Accessing context values outside of Context.Consumer
- SwiperSlide onTouchStart/onClick => trigger slideNext()
- Search icon moving out of div, works fine in chrome but not in mozilla
- Unable to write a snapshot test of a component that is calling a moment method within the render
- How would I change the state/setState of an object nested in an array of an object in an array?
- WC3 Sensors in React Web
- definePlugin is not working in react webpack.config.js in create-react-app boilerplate
- How put a text at the center of a div without using "text-align:center"?
- Spring Security always redirecting me to the default login page
- Table rendering issue from API responce in ReactJs
- To Do List: Delete Button Removes Info from Wrong List Item
- How do I get type checking to work with React forwardRef
- react-spring and framer-motion laggy on firefox
- Idiomatic way to lazy-load with mobx
- How to limit number with 0-999 and just three numbers after the comma in React
- React JS - disable a button if the input field is empty?
- Why the useEffect hook does not work with state variable in context?
- Setting up ExpressJS with MongoDB on MERN Project
- Set Debug or Release | React Native - iOS
- How search the option from select dropdown which search from first letter using antd?
- How to allow buttons to be pressed quickly on a website
- Changing routes within a components changes the whole page
- Access a state value to passing it as parameter of a query
- Property 'x' is missing in type '{}' but required in type 'Pick<Interface, "x">'. TS2741
- how to render input values on button click react
- Rounding issue using toFixed()
- Why is this getPosts function causing major usage of reads in my firestore database?
- Image tag not working in react while sending image path from rails backend