event object in Javascript

Question

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;

this should hold the value of the text field - no, it should be the form, as that is the element emitting the submit event - I don't know what react does to events to make it null, but it definitely would never be a text field — Jaromanda X
– Jaromanda X, Commented Dec 23, 2019 at 5:48
@bhoomeendra check improved your code stackoverflow.com/a/59450677/6544460 — akhtarvahid
– akhtarvahid, Commented Dec 23, 2019 at 5:57
event.target.values is supposed to have the value the event.target does contain the form when when console log it — bhoomeendra
– bhoomeendra, Commented Dec 23, 2019 at 6:03

Fyodor Yemelyanenko · Accepted Answer · 2019-12-23 06:08:23Z

1

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

answered Dec 23, 2019 at 6:08

Fyodor Yemelyanenko

11.9k2 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 23, 2019 at 6:28

seunggabi

1,83016 silver badges13 bronze badges

Comments

Nick Parsons · Accepted Answer · 2019-12-23 11:12:43Z

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.

Collectives™ on Stack Overflow

event object in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related