JavaScript <form> input fields “associative” array?

Question

I will start first by stating that I am fully aware there is no "true" associative array in JavaScript. That being said, I would like to have something like...

<form action="javascript:submitSpecial();" name="myForm" >
    <input name="myInput" type="text" />
</form>

Specifically, I do NOT want this form to directly call a .php script. I want it to be handled by my JavaScript function "submitSpecial()" and pick out the form inputs with their respective names, and make an AJAX call to the next .php script.

document.forms['myForm']['myInput'].name
document.forms['myForm']['myInput'].value

Basically I want to build or find an array with this information in it. I can only use JavaScript, no JQuery or anything like that. The elements[] collection is so close, but I need to know the column names that belong with the values.

Any suggestions?

Thanks in advance, Zak

Answer 1

I don't understand your difficulty. It looks like you understand how to get Javascript form elements . If not, check out the link. Here's how to get elements within the form.

If you want a key value pair, make a JSON object. Here's the technical overview . Here's a cute example .

...so, in your use case:

var formStuffy = {
   "formName" : [
       { "formElementName" : document.getElementByName(formElementName).value },
   ]
}

or something similar (didn't test out that snippet, but conceptually it should be in the ballpark.)

EDIT: per op's clarification that he wanted to get the values of the form fields automatically, you can use the elements like this to interrogate the form for its named elements and values:

for (i=0; i<theform.elements.length; i++){
  alert("element name is " + theform.elements[i].name + " value " + theform.elements[i].value);
}

Answer 2

I'm not sure if I'm understanding your question correctly, and I would generally advise against using the ancient (1996-era) forms.elements.blah syntax, but then again, if it works for your current situation, go for it.

If I interpret your question correctly, you have a form containing a number of fields that would, if they were being stored in a relational database, represent the columns formed by presenting a number of rows from a table or view in that database. This would result, in the case of a naive implementation, in the situation of there being many fields of the same name in the form. This is not necessarily a bad thing, and is in fact required for such cases as a set of checkboxes allowing multiple choices. Outside of such clearly-defined cases, however, such situations should be avoided if possible.

Anyway, leaving aside the weightier issues, let us assume a form with the following structure:

<form name="banana" action="bananaform">
    <input name="skin">
    <input name="skin">
    <input name="skin">
</form>

This markup would result in a form containing three text inputs, each named "skin", within a form named "banana". The value of each input would then be available as

document.forms["banana"]["skin"][0] ,

document.forms["banana"]["skin"][1] , and

document.forms["banana"]["skin"][2] .

In other words, elements within a specific form of the same name become an array-like collection of elements, and can be accessed via standard array indexing syntax.

It is important to note that, as these structures are part of the Document Object Model (DOM) there is no formal requirement for any given implementation to support treating them as if they were native JavaScript arrays, so such properties as length and methods such as sort may not be supported on all platforms.

Indeed, one of the primary purposes of libraries such as JQuery is to protect developers from such anomalies; unfortunately, said libraries are now more often used to allow developers to remain ignorant of the true nature of that with which they work whilst managing to create an impression of competence. If you continue to work with JavaScript and the DOM and to not use JQuery, you will rapidly become a much more competent web developer than 99% of those who rush to answer every JavaScript question on Stack Overflow with a quick'n'dirty JQuery solution that was neither sought nor desired.

I am not the only person who would instantly reject any candidate for a web developer role who was incapable of working without JQuery. Indeed, I expect anybody who uses JQuery to have read and understood the source. Those who haven't are easily identifiable; for example, they think that JQuery has a magic sauce that is different to well-known techniques.

Then again, sometimes, those who know the well-known techniques but haven't read the source make the same mistake of thinking there's a magic sauce, as seen in Eric's comment to my answer here: Unexpected Caching of AJAX results in IE8 (sorry, Eric ;-))

Answer 3

You're looking for JavaScript ForEach Equivalent .

for(var elementName in form.elements)
{
    alert("form."+elementName+": "+elements[elementName]);
}