score:1
Accepted answer
<form onsubmit={handleonsubmit}>
<label>user name</label>
<input type="text" name="username" /><br/>
<label>password</label>
<input type="password" name="password" /><br/>
<input type="submit" value="submit" />
</form>
const handleonsubmit = (event) => {
const formdata = new formdata(event.target);
const formdetails = {};
event.preventdefault();
for (let entry of formdata.entries()) {
formdetails[entry[0]] = entry[1];
};
console.log("formdetails", formdetails);
}
score:1
you need to store the value
const [value, setvalue] = react.usestate();
then give your input a onchange={e => setvalue(e.target.value)}
i would change the id though
score:1
you are getting the input fields value from "formdata" on onsubmit.
const saveactivities = (event) => {
event.preventdefault();
const data = new formdata(event.target);
// insert code to run the call to the backend
}
Source: stackoverflow.com
Related Query
- How to access input elements from a React function
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React how to access state from a function in another file?
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- how to access a custom react component function from its parent component?
- How can i stop input elements from switching to from uncontrolled to controlled and vice versa using react hooks?
- How can I access the text input fields when using express-fileupload from react
- How to access inner virtual DOM elements on onChange call from a parent component in React
- How to access state from another function inside React useEffect
- How do I access the Context and Component state from within a DOM callback in a function React component?
- How can I get input radio elements to horizontally align in react [material-ui]?
- React, how to access the DOM element in my render function from the same component
- React Native: HeadslessJS and Redux - How to access store from task
- How to get value from a react function within a react component
- how to access vairables outside of map function in js and jsx in a React component
- How to access a function in a Webpack bundle from a HTML script
- How to get form data from input fields in React
- How to access environment variables in react from docker and webpack
- can't access httponly cookie from react js but can access in postman app! how is it possible?
- How to return a React memoized callback from factory function
- Embedded React + JSS component: how to protect generic elements like <button>, <p> from getting including page's style?
- How do I access data returned from an axios get to display on a web page using react js?
- How to access a static function from a component instance in react?
- React - How do you call a function from inside another function
- how can i access current location from web-page in react native webview
- How to call a component function on other component, but from the other component ? React
- How to access enviroment variables from laravel to react
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to access values from React Select and pass them to Formik values on Submit?
- Usign react-router-dom, how can I access browserHistory object from outside a React component?
More Query from same tag
- Replace specific module in testing
- How to transfer props in react v0.13?
- Why It Isn't Displaying (React Small App)
- How to use Axios API with Chart.js and React.js
- Debounce in React component JS
- React + Typescript Higher Order Function "not assignable to type" error
- post request to node server not hitting endpoint
- Getting undefined value in reactJS when substracting
- Handling an Unknown Number of Inputs in React
- React-leaflet how to resetStyle
- Mapped array assignment through ternary operator fails?
- Html select options from given array not showing
- How can I set the props type in HOC in react-typescript?
- How I can pass attributes directly to component in vuejs, like reactjs
- Can't understand client side routing
- TS2339: Property 'props' does not exist on type 'Home'
- Code splitting/react-loadable issue
- How does SEO play into the ReactJS page changes
- How do I set the width of a component in my React web-app based off the output of a variable
- How to render results from a component as cards
- How to remove the start script error after executing 'npm start' for Reactjs App
- Submit nested form in Formik
- displaying array data in react. output is not coming
- Warning: setState(...): Cannot update during an existing state transition with redux/immutable
- Sonarqube SonarScanner ignores Javascript files in a React project
- Reactjs redirect to dashboard page after successful login with react-router-dom (v6)
- How to get a onClick to work in a row - reactjs
- React-slick slider items are miss ordered - first item is rendered as last items
- Changing CSS styles of Forms in React via onSubmit
- trying to unit test a function inside react es6 component