How To Get Form Data With JavaScript

In this tutorial, you'll learn how to get form data with JavaScript.

So if you wondering how to get form data with JavaScript this video will show you a couple of ways to retrieve that data from an HTML form.

As you might have expected, it's simply a matter of selecting the input fields that are inside the form, asking for their value properties, then storing that result in a variable (or multiple variables) for use in your code.

You'll see in the tutorial, that there is an alternative way that you can shortcut having to select each element individually and i'll show you a handy function that will allow you to retrieve all the form inputs in a form and store them in a convenient JavaScript object.

#JavaScript #JavaScriptHowtos #HTMLForms Channel Handle @codebubb

[BigBoiTurboslav]

Oh my god what a legend, I spent almost 2 hours trying to figure this out and wow...It was that easy.

[drozerahwebdev]

Hi James,
We also can refer to the 'elements' property of the form that return an 'HTMLFormControlsCollection' type:

const formData =
.filter(element => element.name !== 'submit' ) // this is not a form data...
.reduce((acc, input) => ({...acc, [input.name]: input.value}), {})

In this case I'd rather using the inputs 'name' attributes, more specific...

[badselection]

Hi James, could you explain the role of the ... syntax in this example, and also the reason for putting input.id in bracket notation? Thank you!

[willsimz]

What if one of our inputs is a dropdown selector? Im able to return the text box input but it doesn't show anything for the user selecting from a dropdown

[ouza]

How to get the value of a clicked button ( yes ) or (no) from a form in JS

[m_imran_khan]

Thanks mate. Surely cleaned up some of my code

[AlexNicholls.]

what would the name of the array you created in the video be called? like how would you call it for example to set a new variable to the value of "fred" afterwards. Sorry for such a basic question

[Elator]

Thank you James, highly useful as always!

[jenso]

man, the last technique you used is super interesting and I'd love to learn it but you didn't explain it at all. I appreciate the video, but if you're going to combine the reduce method with a spread operator and computed properties etc you should probably explain how it works. I've spent like 2 hours trying to figure it out lol

[vitopos]

Thank you so much for this! Btw, do you know how if its possible to name the array created?

[grimmdanny]

To get the collection to use as an Array:

<form>
<input name="a" value="1" />
<input name="b" value="2" />
<input name="c" value="3" />
</form>

const fields =

Returns:

[
0: input.input
1: input.input
2: input.input
]

To get a specific field value, use index:

console.log(fields[1].value) // returns "2"



To get the collection as an HTMLFormControlsCollection:

const fields = document.forms[0].elements;

Returns:

[
0: input.input
1: input.input
2: input.input
a: input.input
b: input.input
c: input.input
]

To get a specific field value, use index or name:

console.log(fields[1].value) // returns "2"

console.log(fields.b.value) // returns "2"

[SpaceIt]

hello brudder nice tutorial but i want to do that when clicked on submit then users data should come to me so how to do please brudder

[Elator]

James, can you make a video about how to copy/clone an object? This is a popular interview question, of course, Object.assign and {...} create only shallow copies, but if an object has other nested objects inside of it, they'll not be copied, rather referenced by a link and will refer to the same object. I'd like to see your solution, or, if you have this video on your channel, please refer me to it.Thank you in advance.

[asht]

Can you please show how to take it to next step? like submitting the javascript array data to ajax (backend) in wordpress

[ReyBanYAHUAH]

Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins!

Come to HIM🙂🙂🙂🙂🙂🙂🙂