CODEWITHSUNDEEP
javascriptreactjs
bhoomeendra
bhoomeendra

Reputation: 197

event object in Javascript

When Ever i submit this form the event.target turn out to be null this should hold the value of the text field? why is this happening as it is supposed the have values of the text field

import React, { Component } from "react";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.fun = props;
  }

  handleOnsubmit(event) {
    event.preventDefault();
    console.log("Inside ");
    console.log(event.target);
  }


  render() {
    return (
      <>
        <form onSubmit={this.handleOnsubmit}>
          UserName:
          <input type="text"></input>
          <br></br>

          Password:
          <input type="text"></input>
          <br></br>

          <button type="submit">Submit</button>
        </form>
      </>
    );
  }
}

export default Login;

Upvotes: 2

Views: 134

Answers (3)

Nick Parsons
Nick Parsons

Reputation: 50674

The event object inside the handleOnsubmit method is referring to the on submit event which occurred on your form. So its target will be the form itself (not null).

Instead of getting the value of the input when the form is submitted, you can instead keep two state properties which keep track of the state of the text inputs in your form. Then, whenever your inputs change (using the onChange) event, you can update their respective states. This means that when you submit your form, you can reference this state using this.state:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: "", password: "" };
  }

  handleOnsubmit = e => { // e.target here is the form
    e.preventDefault();
    console.log(this.state.username, this.state.password);
  };

  handleInput = e => { // e.target here is the input element
    this.setState({[e.target.name]: e.target.value });
  };

  render() {
    return (
      <>
        <form onSubmit={this.handleOnsubmit}>
          UserName:
          <input type="text" name="username" onChange={this.handleInput} />
          <br />
          Password:
          <input type="password" name="password" onChange={this.handleInput} />
          <br />
          <button type="submit">Submit</button>
        </form>
      </>
    );
  }
}

See working example here

Also note, the input tag is self-closing.

Upvotes: 0

seunggabi
seunggabi

Reputation: 1822

It's works. Your check is wrong...

check this demo https://codesandbox.io/s/compassionate-bhaskara-qr44t

enter image description here

Upvotes: 0

Fyodor Yemelyanenko
Fyodor Yemelyanenko

Reputation: 11848

event.target is array of form controls. So to access value of first input (UserName in your case), use event.target[0].value

This how OnSubmit will look like

  handleOnsubmit(event) {
    event.preventDefault();
    console.log("Inside ");
    console.log(`UserName: ${event.target[0].value}`);
    console.log(`Password: ${event.target[1].value}`);
  }

And demo

Upvotes: 1

Related Questions