Capturing form data: variables or array?

Question

I have a form with about 20 input fields. I capture values of these fields, then do some calculations and output several values.

Is there a preferred/recommended way of capturing form data? Currently I store every form field into a separate variable. I was wondering if storing it to an array would be a better and more effective approach.

I'm quite new to Javascript and programming in general, trying to learn the best practices.

You may want to try [codereview.stackexchange.com](http://codereview.stackexchange.com) and include your code. — James Montagne, Feb 01 '12 at 21:39

score 2 · Accepted Answer · answered Feb 01 '12 at 21:41

My best practice on this depends on what I have to do with the data. If I do not need to loop through it, or send it to another page/service, then there's nothing wrong with individual scoped-variables.

If I need to loop at all, I commonly use an array or object to loop through.

If I have to pass it to another page/service, I make one object variable to encapsulate the rest of them, so I can "stringify" it to JSON and parse back to an object on the other end.

Just my opinion,

Pete

score 0 · Answer 2 · answered Feb 01 '12 at 21:40

0

You might consider the third approach - just use the data from the form without storing it anywhere.

First check the correctness, once it is considered correct just use what you have.

answered Feb 01 '12 at 21:40

Roman Goyenko

6,965
5
48
81

In the calculations I'm doing I need to use some of that data in several different formulas so storing them into a variable/array seemed like the right approach to me. But I could be wrong. – finspin Feb 01 '12 at 21:45
I would put the form in variable, then use something like form['value'] in calculations. For the variables that are used more often you could put them in the variable. Putting them in the array wouldn't give you much benefit, form is a sort of array, so no need to add additional arrays. – Roman Goyenko Feb 03 '12 at 02:09

score 0 · Answer 3 · answered Feb 01 '12 at 21:45

0

You should always assign the attribute "name=..." to an input element, so you can use something like:

var form = document.forms['form'];
var email = form['email'];
email = do something

if you use javascript... if you use jquery it's simple $('input[name="email"]') = do something

I prefer this way because you can call variables by name, not by number, for example "form[0] that corresponds to input[name="email"]".

answered Feb 01 '12 at 21:45

AleVale94

727
1
8
14

This is what I'm currently doing but having 20 - 30 variables seemed a little bit overwhelming to me so I was wondering if there is a better way to work with the form data. – finspin Feb 01 '12 at 21:48
I suggest you to continue on this way, then you can check all them with some functions. If you have 2 or more input that need the same control you haven't to write 20 functions but just 1 for all of them. – AleVale94 Feb 01 '12 at 21:55

score 0 · Answer 4 · edited May 23 '17 at 10:34

Use the associative properties of arrays in JavaScript to get the benefits of unique field names and OOP:

var formModel = new Array();

formModel['myField'] = getMyFieldValue(); // make 'myField' index to any object

Then you can do things like:

formModel['myField'] // get the value
formModel.length; // number of fields added
for (entry in formModel) { /* loop thru entries */ }
formModel.sort([compareFunction]) // custom sort
formModel = []; // clear the model
Convert array to JSON
Any of these Array^MDN conveniences.

Just one approach, but arrays in JS are extremely versatile and IMO underused objects in JS.

Capturing form data: variables or array?

4 Answers4