By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,688 Members | 1,845 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,688 IT Pros & Developers. It's quick & easy.

accessing form data from javascript

P: n/a
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


Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Chris Styles wrote:
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #2

P: n/a
Chris Styles wrote:
<snip>
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.
Jul 23 '05 #3

P: n/a

Where are you calling the function from, using what event, chances are,
you do not need to specify form names and such, as for using an
variable/element to address an obj, you bracket it:

myArray=['duck','wings'];
document.FORMNAMEHERE[myArray[0]].selectedIndex=2;
------------ will select the 3rd option in
document.FORMNAMEHERE.duck select element ----
note that if you're event handler is from a form element, you can just
use this.form as argument for the function to address its siblings.

Danny

On Sun, 05 Jun 2005 16:18:33 -0700, Chris Styles
<ch***@nospam.dustbubble.com> wrote:
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




--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #4

P: n/a
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[i]].value );
}
}
</script>

--
Rob
Jul 23 '05 #5

P: n/a
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
"RobG" <rg***@iinet.net.auau> wrote in message
news:4X*****************@news.optus.net.au...
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[i]].value );
}
}
</script>

--
Rob

Jul 23 '05 #6

P: n/a
Chris Styles wrote:
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>
--
Rob
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.