event.target.name is undefined after submit

Question

I want to get value = 100 from event.target.value, but result in null instead. but event.target has the form that I submit, I guess I just dont know the right way to access the data.

Similar question but solution didn't work for me event.target.name is undefined

code for the form

<Form onSubmit={this.handleSubmit}>
                <Form.Control
                  name={item.ID}
                  onChange={this.onChange}
                  value={this.state[item.ID] || ""}
                />
                 <button type="submit">Submit</button>
              </Form>

handleSubmit code

handleSubmit= (event) => {
event.preventDefault();
let item = {
  ID: event.target.name,
  Price: event.target.value,
};
console.log(event.target)
console.log(event.target.getAttribute('value'))
console.log(event.target.name)
console.log(event.target.value)
// putSubcategories(item, this.submitCallback);

}

event.target gives back

<form class><input name="1" class="form-control" value="100"><button type="submit">Submit</button></form>

event.target.getAttribute('value') = null

event.target.name = null

event.target.value = null

score 1 · Answer 1 · answered Aug 03 '21 at 10:32

submit Event is on the form. So you get the form element which does not have the properties you look for.

let targetInput = event.target.querySelector('input');
console.log(targetInput )
console.log(targetInput.getAttribute('value'))
console.log(targetInput.name)
console.log(targetInput.value)

event.target.name is undefined after submit

1 Answers1