Get form data in ReactJS

Question

I have a simple form in my render function  like so   render   function           return            lt form gt             lt input type  text  name  email  placeholder  Email    gt             lt input type  password  name  password  placeholder  Password    gt             lt button type  button  onClick  this handleLogin  gt Login lt  button gt           lt  form gt                  handleLogin  function          How to access email and password here       What should I write in my handleLogin  function           to access Email and Password fields

User · Answer

onChange event        console log event target value         handleSubmit event        event preventDefault        const formData             for  const data in this refs            formData data    this refs data  value              console log formData            lt form onSubmit  this handleSubmit bind this   gt     lt input type  text  ref  username  onChange  this onChange  className  form-control   gt     lt input type  text  ref  password  onChange  this onChange  className  form-control   gt     lt button type  submit  className  btn-danger btn-sm  gt Search lt  button gt    lt  form gt    Output image attached here

User · Answer

This is an example of dynamically added field  Here form data will store by input name key using React useState hook   x000D   x000D  import React    useState   from  react   function AuthForm   firebase          const  formData  setFormData    useState              On Form Submit     const onFormSubmit    event    gt            event preventDefault            console log  data   formData             Submit here                get Data     const getData    key    gt            return formData hasOwnProperty key    formData key                       Set data     const setData    key  value    gt            return setFormData      formData   key   value                 console log  firebase   firebase      return            lt div className  wpcwv-authPage  gt               lt form onSubmit  onFormSubmit  className  wpcwv-authForm  gt                   lt input name  name  type  text  className  wpcwv-input  placeholder  Your Name  value  getData  name    onChange   e    gt  setData  name   e target value     gt                   lt input name  email  type  email  className  wpcwv-input  placeholder  Your Email  value  getData  email    onChange   e    gt  setData  email   e target value     gt                   lt button type  submit  className  wpcwv-button wpcwv-buttonPrimary  gt Submit lt  button gt               lt  form gt           lt  div gt           export default AuthForm x000D   x000D   x000D

User · Answer

In many events in javascript  we have event which give an object including what event happened and what are the values  etc     That s what we use with forms in ReactJs as well     So in your code you set the state to the new value    something like this   class UserInfo extends React Component      constructor props        super props       this handleLogin   this handleLogin bind this          handleLogin e        e preventDefault        for  const field in this refs          this setState  this refs field   this refs field  value                 render         return            lt div gt             lt form onSubmit  this handleLogin  gt               lt input ref  email  type  text  name  email  placeholder  Email    gt               lt input ref  password  type  password  name  password  placeholder  Password    gt               lt button type  button  gt Login lt  button gt             lt  form gt           lt  div gt                export default UserInfo    Also this is the form example in React v 16  just as reference for the form you creating in the future   class NameForm extends React Component     constructor props        super props       this state    value            this handleChange   this handleChange bind this       this handleSubmit   this handleSubmit bind this          handleChange event        this setState  value  event target value           handleSubmit event        alert  A name was submitted      this state value       event preventDefault           render         return          lt form onSubmit  this handleSubmit  gt           lt label gt            Name             lt input type  text  value  this state value  onChange  this handleChange    gt           lt  label gt           lt input type  submit  value  Submit    gt         lt  form gt

User · Answer

Also  this can be used too    handleChange  function state e      this setState   state   e target value       render   function       return        lt form gt         lt input type  text  name  email  placeholder  Email  value  this state email  onChange  this handleChange bind this   email      gt         lt input type  password  name  password  placeholder  Password  value  this state password  onChange  this handleChange bind this   password     gt         lt button type  button  onClick  this handleLogin  gt Login lt  button gt       lt  form gt          handleLogin  function       console log  EMail     this state email     console log  Password     this state password

User · Answer

There are a few ways to do this   1  Get values from array of form elements by index  handleSubmit    event    gt      event preventDefault      console log event target 0  value      2  Using name attribute in html  handleSubmit    event    gt      event preventDefault      console log event target elements username value     from elements property   console log event target username value              or directly     lt input type  text  name  username   gt    3  Using refs  handleSubmit    event    gt      console log this inputNode value      lt input type  text  name  username  ref  node   gt   this inputNode   node    gt    Full example  class NameForm extends React Component     handleSubmit    event    gt        event preventDefault       console log event target 0  value      console log event target elements username value      console log event target username value      console log this inputNode value        render         return          lt form onSubmit  this handleSubmit  gt           lt label gt            Name             lt input             type  text              name  username              ref  node   gt   this inputNode   node               gt           lt  label gt           lt button type  submit  gt Submit lt  button gt         lt  form gt

User · Answer

An alternative approach is to use the ref attribute and reference the values with this refs  Here is a simple example   render  function         return   lt form onSubmit  this submitForm  gt           lt input ref  theInput    gt       lt  form gt       submitForm  function e        e preventDefault        alert React findDOMNode this refs theInput  value       More info can be found in the React docs  https   facebook github io react docs more-about-refs html the-ref-string-attribute  For a lot of the reasons described in How do I use radio buttons in React  this approach isn t always the best  but it does present a useful alternative in some simple cases

User · Answer

Give your inputs ref like this   lt input type  text  name  email  placeholder  Email  ref  email    gt   lt input type  password  name  password  placeholder  Password  ref  password    gt    then you can access it in your handleLogin like soo  handleLogin  function e       e preventDefault        console log this refs email value      console log this refs password value

User · Answer

I use like this using React Component state    lt input type  text  name  value  value  this state value  onChange   e    gt  this handleChange e     gt   handleChange e      this setState   e target name   e target value

User · Answer

This might help Meteor  v1 3  users   render  function         return            lt form onSubmit  this submitForm bind this   gt               lt input type  text  ref  email  placeholder  Email    gt               lt input type  password  ref  password  placeholder  Password    gt               lt button type  submit  gt Login lt  button gt           lt  form gt            submitForm  function e        e preventDefault        console log  this refs email value        console log  this refs password value

User · Answer

More clear example with es6 destructing  class Form extends Component       constructor props            super props           this state                 login  null              password  null              email  null                      onChange e            this setState                e target name   e target value                       onSubmit e            e preventDefault            let login   this state login          let password   this state password             etc            render             return                lt form onSubmit  this onSubmit bind this   gt                   lt input type  text  name  login  onChange  this onChange bind this     gt                   lt input type  password  name  password  onChange  this onChange bind this     gt                   lt input type  email  name  email  onChange  this onChange bind this     gt                   lt button type  submit  gt Sign Up lt  button gt               lt  form gt

User · Answer

You could switch the onClick event handler on the button to an onSubmit handler on the form   render   function           return            lt form onSubmit  this handleLogin  gt             lt input type  text  name  email  placeholder  Email    gt             lt input type  password  name  password  placeholder  Password    gt             lt button type  submit  gt Login lt  button gt           lt  form gt                    Then you can make use of FormData to parse the form  and construct a JSON object from its entries if you want    handleLogin  function e       const formData   new FormData e target     const user          e preventDefault       for  let entry of formData entries             user entry 0     entry 1              Do what you will with the user object here

User · Answer

I think this is also the answer that you need  In addition  Here I add the required attributes  onChange attributes of Each input components are functions  You need to add your own logic there  handleEmailChange  function e        this setState  email  e target value       handlePasswordChange  function e       this setState  password  e target value       formSubmit   async function e        e preventDefault           Form submit Logic      render   function           return            lt form onSubmit   e    gt  this formSubmit e   gt             lt input type  quot text quot  name  quot email quot  placeholder  quot Email quot  value  this state email  onChange  this handleEmailChange  required   gt             lt input type  quot password quot  name  quot password quot  placeholder  quot Password quot  value  this state password  onChange  this handlePasswordChange  required   gt             lt button type  quot button quot  gt Login lt  button gt           lt  form gt       handleLogin  function           Login Function

User · Answer

I would suggest the following approach   import  Autobind  from  es-decorators    export class Form extends Component         Autobind     handleChange e            this setState   e target name   e target value                Autobind     add e            e preventDefault            this collection add this state           this refs form reset               shouldComponentUpdate             return false             render             return                lt form onSubmit  this add  ref  form  gt                   lt input type  text  name  desination  onChange  this handleChange   gt                   lt input type  date  name  startDate  onChange  this handleChange   gt                   lt input type  date  name  endDate  onChange  this handleChange   gt                   lt textarea name  description  onChange  this handleChange   gt                   lt button type  submit  gt Add lt  button gt               lt  form gt

User · Answer

For those who don t want to use ref and reset the state with OnChange event  you can just use simple OnSubmit handle and loop through the FormData object  This example is using React Hooks  const LoginPage        gt       const handleSubmit    event    gt            const formData   new FormData event target           event preventDefault            for  let  key  value  of formData entries                  console log key  value                        return            lt div gt           lt form onSubmit           handleSubmit                     gt           lt input type  quot text quot  name  quot username quot  placeholder  quot Email quot    gt           lt input type  quot password quot  name  quot password quot          placeholder  quot Password quot    gt           lt button type  quot submit quot  gt Login lt  button gt           lt  form gt           lt  div gt

User · Answer

If you have multiple occurrences of an element name  then you have to use forEach      html     lt input type  checkbox  name  delete  id  flizzit    gt     lt input type  checkbox  name  delete  id  floo    gt     lt input type  checkbox  name  delete  id  flum    gt     lt input type  submit  value  Save   onClick  evt   gt  saveAction evt   gt  lt  input gt    js  const submitAction    evt    gt      evt preventDefault      const dels   evt target parentElement delete    const deleted         dels forEach  d    gt    if  d checked  deleted push d id         window alert deleted length        Note the dels in this case is a RadioNodeList  not an array  and is not an Iterable  The forEach  is a built-in method of the list class  You will not be able to use a map   or reduce   here

User · Answer

To improve the user experience  when the user clicks on the submit button  you can try to get the form to first show a sending message  Once we ve received a response from the server  it can update the message accordingly  We achieve this in React by chaining statuses  See codepen or snippets below   The following method makes the first state change   handleSubmit e        e preventDefault        this setState   message   Sending        this sendFormData       As soon as React shows the above Sending message on screen  it will call the method that will send the form data to the server  this sendFormData    For simplicity I ve added a setTimeout to mimic this   sendFormData       var formData           Title  this refs Title value        Author  this refs Author value        Genre  this refs Genre value        YearReleased  this refs YearReleased value     setTimeout      gt         console log formData       this setState   message   data sent            3000       In React  the method this setState   renders a component with new properties  So you can also add some logic in render   method of the form component that will behave differently depending on the type of response we get from the server  For instance   render       if  this state responseType          var classString    alert alert-    this state type        var status    lt div id  status  className  classString  ref  status  gt                        this state message                      lt  div gt       return         codepen

User · Answer

An easy way to deal with refs     x000D   x000D  class UserInfo extends React Component   x000D   x000D    constructor props    x000D      super props   x000D      this handleSubmit   this handleSubmit bind this   x000D      x000D   x000D    handleSubmit e    x000D      e preventDefault    x000D       x000D      const formData       x000D      for  const field in this refs    x000D        formData field    this refs field  value  x000D        x000D      console log  -- gt    formData   x000D      x000D   x000D    render     x000D      return   x000D           lt div gt  x000D             lt form onSubmit  this handleSubmit  gt  x000D               lt input ref  phone  className  phone  type  tel  name  phone   gt  x000D               lt input ref  email  className  email  type  tel  name  email   gt  x000D               lt input type  submit  value  Submit   gt  x000D             lt  form gt  x000D           lt  div gt  x000D         x000D      x000D    x000D   x000D  export default UserInfo  x000D   x000D   x000D

User · Answer

Use the change events on the inputs to update the component s state and access it in handleLogin   handleEmailChange  function e       this setState  email  e target value       handlePasswordChange  function e       this setState  password  e target value       render   function           return            lt form gt             lt input type  text  name  email  placeholder  Email  value  this state email  onChange  this handleEmailChange    gt             lt input type  password  name  password  placeholder  Password  value  this state password  onChange  this handlePasswordChange   gt             lt button type  button  onClick  this handleLogin  gt Login lt  button gt           lt  form gt       handleLogin  function         console log  EMail      this state email       console log  Password      this state password       Working fiddle   Also  read the docs  there is a whole section dedicated to form handling  Forms   Previously you could also use React s two-way databinding helper mixin to achieve the same thing  but now it s deprecated in favor of setting the value and change handler  as above    var ExampleForm   React createClass     mixins   React addons LinkedStateMixin     getInitialState  function         return  email      password              handleLogin  function         console log  EMail      this state email       console log  Password      this state password          render  function         return          lt form gt           lt input type  text  valueLink  this linkState  email      gt           lt input type  password  valueLink  this linkState  password      gt           lt button type  button  onClick  this handleLogin  gt Login lt  button gt         lt  form gt                   Documentation is here  Two-way Binding Helpers

User · Answer

No need to use refs  you can access using event function handleSubmit e        e preventDefault       const  username  password     e target elements     console log  username  username value  password  password value        lt form onSubmit  handleSubmit  gt      lt input type  quot text quot  id  quot username quot   gt      lt input type  quot text quot  id  quot password quot   gt      lt input type  quot submit quot  value  quot Login quot    gt   lt  form gt

User · Answer

If all your inputs   textarea have a name  then you can filter all from event target   onSubmit event     const fields   Array prototype slice call event target         filter el   gt  el name         reduce  form  el    gt                form           el name   el value                    Totally uncontrolled form  without onChange methods  value  defaultValue

User · Answer

If you are using Redux in your project you can consider using this higher order component https   github com erikras redux-form

User · Answer

Adding on to Michael Schock s answer   class MyForm extends React Component     constructor         super        this handleSubmit   this handleSubmit bind this          handleSubmit event        event preventDefault        const data   new FormData event target        console log data get  email        reference by form input s  name  tag      fetch   api form-submit-url           method   POST         body  data                 render         return          lt form onSubmit  this handleSubmit  gt           lt label htmlFor  username  gt Enter username lt  label gt           lt input id  username  name  username  type  text    gt            lt label htmlFor  email  gt Enter your email lt  label gt           lt input id  email  name  email  type  email    gt            lt label htmlFor  birthdate  gt Enter your birth date lt  label gt           lt input id  birthdate  name  birthdate  type  text    gt            lt button gt Send data  lt  button gt         lt  form gt                 See this Medium article  How to Handle Forms with Just React  This method gets form data only when Submit button is pressed  Much cleaner IMO

[javascript] Get form data in ReactJS

Examples related to javascript

Examples related to html

Examples related to reactjs

Examples related to frontend