accessing form data from javascript

[Chris Styles]

Dear All,

I've been using some code to verify form data quite happily, but i've
recently changed the way my form is structured, and I can't get it to work
now.

Originally :

The form is called "form1", and I have selects called "PORTA", "PORTB" ...
etc...

I then had javascript that accessed these selects as below, and it worked
fine.

ind = document.form1.PORTD.selectedIndex;
val = document.form1.PORTD.options[ind].value;
dev = document.form1.PORTD.options[ind].text;


My form is now autogenerated, and form data is stored to file, so I now use
an associative array for thte form elements (so that I can loop through them
easily), The form elements names are now :

McuCfg[PORTA], McuCfg{PORTB} and so on

Now, I modified the javascript so that it now uses the McuCfg[] associative
array :


ind = document.form1.McuCfg[PORTD].selectedIndex;
val = document.form1.McuCfg[PORTD].options[ind].value;
dev = document.form1.McuCfg[PORTD].options[ind].text;


When the script runs, I get the error

"document.form1.McuCfg.PORTD is null or not an object"

I have used the same notation that i know works for the "options" array
although that's not an associative array.

Can anyone suggest how I might go about accessing the form elements form
javascripts.. google hasnt helped at all :-(

Thanks in advance

Chris

 

[Randy Webb]

Dear All,

I've been using some code to verify form data quite happily, but i've
recently changed the way my form is structured, and I can't get it to work
now.

Originally :

The form is called "form1", and I have selects called "PORTA", "PORTB" ...
etc...

I then had javascript that accessed these selects as below, and it worked
fine.

ind = document.form1.PORTD.selectedIndex;
val = document.form1.PORTD.options[ind].value;
dev = document.form1.PORTD.options[ind].text;


My form is now autogenerated, and form data is stored to file, so I now use
an associative array for thte form elements (so that I can loop through them
easily), The form elements names are now :

McuCfg[PORTA], McuCfg{PORTB} and so on

Now, I modified the javascript so that it now uses the McuCfg[] associative
array :


ind = document.form1.McuCfg[PORTD].selectedIndex;
val = document.form1.McuCfg[PORTD].options[ind].value;
dev = document.form1.McuCfg[PORTD].options[ind].text;


When the script runs, I get the error

"document.form1.McuCfg.PORTD is null or not an object"
Correct.

I have used the same notation that i know works for the "options" array
although that's not an associative array.

Neither is the McuCfg array.

Can anyone suggest how I might go about accessing the form elements form
javascripts.. google hasnt helped at all :-(

Did Google turn up the FAQ for this group?

http://jibbering.com/faq/#FAQ4_25

That specific part of the FAQ deals with accessing form elements with []
in the name. It will also apply to elements with (), {} in the name as well.

 

[Richard Cornford]

Chris Styles wrote:

My form is now autogenerated, and form data is stored
to file, so I now use an associative array for thte
form elements (so that I can loop through them easily),
The form elements names are now :

McuCfg[PORTA], McuCfg{PORTB} and so on

Now, I modified the javascript so that it now uses the
McuCfg[] associative array :

ind = document.form1.McuCfg[PORTD].selectedIndex;
val = document.form1.McuCfg[PORTD].options[ind].value;
dev = document.form1.McuCfg[PORTD].options[ind].text;

When the script runs, I get the error

"document.form1.McuCfg.PORTD is null or not an object"

I have used the same notation that i know works for the
"options" array although that's not an associative array.

The options property of SELECT elements is a collection, but there are
no associative arrays in javascript (Objects (the 'ECMAScript native
object') are as close as javascript gets). Your associative array is in
PHP (probably) and exists on the server, it has not existence on the
client, in javascript or the browser's DOM.

Can anyone suggest how I might go about accessing the
form elements form javascripts.. google hasnt helped
at all :-(

<URL: http://www.jibbering.com/faq/#FAQ4_25 >

Richard.

 

[RobG]

Chris Styles wrote:
[...]

My form is now autogenerated, and form data is stored to file, so I now use
an associative array for thte form elements (so that I can loop through them
easily), The form elements names are now :

McuCfg[PORTA], McuCfg{PORTB} and so on

Now, I modified the javascript so that it now uses the McuCfg[] associative
array :


ind = document.form1.McuCfg[PORTD].selectedIndex;
val = document.form1.McuCfg[PORTD].options[ind].value;
dev = document.form1.McuCfg[PORTD].options[ind].text;


When the script runs, I get the error

"document.form1.McuCfg.PORTD is null or not an object"

To answer your specific question, the above line tells you how the
browser is interpreting your statement.

When accessing form elements using dot notation like this, the format
is:

document.<formName>.<elementName>.<...>;

What comes after the elementName could be another element name (for
those elements that have children, such as a select) or a property of
the element (name, id, etc.).

In your code, 'McuCfg' is being read as an element name, the content of
the [] is being read as either an index to the collection of child
elements or the name of a child element. So the line references a form
named 'form1' with a child called 'McuCfg'. 'PORTD' is being passed as
a variable - it should contain either an index or string that is the
name of a child of 'McuCfg'. But since there is no element 'McuCfg',
the script doesn't get that far. To use 'PORTD' as a literal string,
it needs to be quoted (but that wont help here anyway...).

Your second issue is with your array notation. If your array is:

var McuCfg = [ 'PORTA','PORTB','PORTC','PORTD' ]

Then a reference to 'PORTD' will be 'McuCfg[3]', there is no element
'McuCfg[PORTD]'.

A more general way of accessing forms and their elements is using the
forms and elements collections:

document.forms[formName].elements[elementName]...

or

document.forms[index].elements[index]...

You can mix the notations together, though I'm not sure whether that is
viewed as good practice for maintenance reasons.

To fix your code, use the elements collection:

ind = document.form1.elements[McuCfg[3]].selectedIndex;

I have used the same notation that i know works for the "options" array
although that's not an associative array.

It's an HTML collection, which is like an array only different.

Can anyone suggest how I might go about accessing the form elements form
javascripts.. google hasnt helped at all :-(

Here's some play code with a couple of different ways of accessing form
elements:


<form name="form1" action="">
<input name="PORTA" type="text" value="PORTA value"><br>
<input name="PORTB" type="text" value="PORTB value"><br>
<input name="PORTC" type="text" value="PORTC value"><br>
<input name="PORTD" type="text" value="PORTD value"><br>
<input type="button" value="Do stuff" onclick="
doStuff();
">
</form>
<script type="text/javascript">

function doStuff(){
var McuCfg = [ 'PORTA','PORTB','PORTC','PORTD' ]

alert( 'Direct access: '
+ document.forms['form1'].elements[McuCfg[3]].value);

for ( var i=0, j=McuCfg.length; i<j; i++){
alert('Looping: '
+ document.form1.elements[McuCfg].value );
}
}
</script>

 

[Chris Styles]

Rob,

Thanks for such a concise reply. As you may all have guessed, I'm rather new
to Javascript, and so some of the concepts are still a little fuzzy. This
one is crystal clear now..

Cheers

Chris

Chris Styles wrote:
[...]

My form is now autogenerated, and form data is stored to file, so I now use
an associative array for thte form elements (so that I can loop through them
easily), The form elements names are now :

McuCfg[PORTA], McuCfg{PORTB} and so on

Now, I modified the javascript so that it now uses the McuCfg[] associative
array :


ind = document.form1.McuCfg[PORTD].selectedIndex;
val = document.form1.McuCfg[PORTD].options[ind].value;
dev = document.form1.McuCfg[PORTD].options[ind].text;


When the script runs, I get the error

"document.form1.McuCfg.PORTD is null or not an object"

To answer your specific question, the above line tells you how the
browser is interpreting your statement.

When accessing form elements using dot notation like this, the format
is:

document.<formName>.<elementName>.<...>;

What comes after the elementName could be another element name (for
those elements that have children, such as a select) or a property of
the element (name, id, etc.).

In your code, 'McuCfg' is being read as an element name, the content of
the [] is being read as either an index to the collection of child
elements or the name of a child element. So the line references a form
named 'form1' with a child called 'McuCfg'. 'PORTD' is being passed as
a variable - it should contain either an index or string that is the
name of a child of 'McuCfg'. But since there is no element 'McuCfg',
the script doesn't get that far. To use 'PORTD' as a literal string,
it needs to be quoted (but that wont help here anyway...).

Your second issue is with your array notation. If your array is:

var McuCfg = [ 'PORTA','PORTB','PORTC','PORTD' ]

Then a reference to 'PORTD' will be 'McuCfg[3]', there is no element
'McuCfg[PORTD]'.

A more general way of accessing forms and their elements is using the
forms and elements collections:

document.forms[formName].elements[elementName]...

or

document.forms[index].elements[index]...

You can mix the notations together, though I'm not sure whether that is
viewed as good practice for maintenance reasons.

To fix your code, use the elements collection:

ind = document.form1.elements[McuCfg[3]].selectedIndex;

I have used the same notation that i know works for the "options" array
although that's not an associative array.

It's an HTML collection, which is like an array only different.

Can anyone suggest how I might go about accessing the form elements form
javascripts.. google hasnt helped at all :-(

Here's some play code with a couple of different ways of accessing form
elements:


<form name="form1" action="">
<input name="PORTA" type="text" value="PORTA value"><br>
<input name="PORTB" type="text" value="PORTB value"><br>
<input name="PORTC" type="text" value="PORTC value"><br>
<input name="PORTD" type="text" value="PORTD value"><br>
<input type="button" value="Do stuff" onclick="
doStuff();
">
</form>
<script type="text/javascript">

function doStuff(){
var McuCfg = [ 'PORTA','PORTB','PORTC','PORTD' ]

alert( 'Direct access: '
+ document.forms['form1'].elements[McuCfg[3]].value);

for ( var i=0, j=McuCfg.length; i<j; i++){
alert('Looping: '
+ document.form1.elements[McuCfg].value );
}
}
</script>

 

[RobG]

Rob,

Thanks for such a concise reply. As you may all have guessed, I'm rather new
to Javascript, and so some of the concepts are still a little fuzzy. This
one is crystal clear now..

Glad to help, but please follow the convention and do not top post.
Quote only what is relevant and place your reply below the qouted text.

Have a read of the group FAQ:

<URL:http://www.jibbering.com/faq>