Can we loop through event.target and get attribute values for each element inside a form

Question

I would like to know if we can loop through event.target and get attribute values for each element inside a form. I am trying to implement this in Reactjs. There is just a basic form as given below

<form onSubmit={this.handleSubmit}> <input type="text" name="name" /> <input type="email" name="email" /> <input type="password" name="password" /> </form>

and in the handleSubmit function, the code is as given below

handleSubmit(event) { event.preventDefault(); let target = event.target; let formData = {}; formData.username = target.name.value; formData.email = target.email.value; formData.passowrd = target.passowrd.value; console.log(formData); }

I get the user filled data in the console.log as required. But as you can see I need specify each and every element to get the formData, Imagine a form with 20-30 elements.

I tried to do something as given below

count = 0; formData = []; foreach(target as item) { formData[count][item.name] = item.value; }

It's basically PHP code But put here so that you can see what am trying to do. I tried to do this js and it gives me all kind of errors. Please let know if it's possible in js If so? How can I achieve it?

It's imposible to do it like you tried. I think you have to implement an abstraction where you will register each field to have access to them as you want — Kasabucki Alexandr
– Kasabucki Alexandr, Commented Sep 24, 2019 at 7:49

Scrappy Cocco · Accepted Answer · 2019-09-24 10:50:26Z

I think u r looking for this:

handleSubmit(event) { event.preventDefault(); let target = event.target; let formData = {}; for (let i = 0; i < target.length; i++) { formData[target.elements[i].getAttribute("name")] = target.elements[i].value; } console.log('formData', formData); }

Andy · Accepted Answer · 2019-09-24 08:22:23Z

Sure you can. You cache all the inputs and then loop over them with forEach when the form is submitted.

// Cache the form element, and the inputs const form = document.querySelector('form'); const inputs = form.querySelectorAll('input'); // Attach an event listener to the form that calls // handleSubmit when it is submitted form.addEventListener('submit', handleSubmit, false); function handleSubmit(e) { // Prevent the form from submitting e.preventDefault(); // Create a form object const form = {}; // Iterate over your inputs and set the input name as your // property key, and the value as its value inputs.forEach(({ name, value }) => form[name] = value); console.log(form); }

<form> <input type="text" name="name" /> <input type="email" name="email" /> <input type="password" name="password" /> <button type="submit">Submit</button> </form>

Camilo · Accepted Answer · 2022-10-16 15:27:50Z

You can also use Array.from() to instansiate a new array from a form.

For example:

const handleOnSubmit = (event) => { event.preventDefault(); const inputs = Array.from(event.target); inputs.forEach(input => { console.log(input.name, input.value); }); }

Collectives™ on Stack Overflow

Can we loop through event.target and get attribute values for each element inside a form

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related