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.selectedI ndex;
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]

Re: accessing form data from javascript

Chris Styles wrote:
[color=blue]
> 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.selectedI ndex;
> 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"[/color]

Correct.
[color=blue]
> I have used the same notation that i know works for the "options" array
> although that's not an associative array.[/color]

Neither is the McuCfg array.
[color=blue]
> Can anyone suggest how I might go about accessing the form elements form
> javascripts.. google hasnt helped at all :-([/color]

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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Richard Cornford]

Re: accessing form data from javascript

Chris Styles wrote:
<snip>[color=blue]
> 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.[/color]

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.
[color=blue]
> Can anyone suggest how I might go about accessing the
> form elements form javascripts.. google hasnt helped
> at all :-([/color]

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

Richard.

[Danny]

Re: accessing form data from javascript


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.FORMNA MEHERE[myArray[0]].selectedIndex= 2;
------------ will select the 3rd option in
document.FORMNA MEHERE.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
<chris@nospam.d ustbubble.com> wrote:
[color=blue]
> 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.selectedI ndex;
> 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
>
>
>
>
>
>
>
>[/color]



--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[RobG]

Re: accessing form data from javascript

Chris Styles wrote:
[...][color=blue]
> 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"[/color]

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.<formN ame>.<elementNa me>.<...>;

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;
[color=blue]
>
> I have used the same notation that i know works for the "options" array
> although that's not an associative array.[/color]

It's an HTML collection, which is like an array only different.
[color=blue]
>
> Can anyone suggest how I might go about accessing the form elements form
> javascripts.. google hasnt helped at all :-([/color]

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

[Chris Styles]

Re: accessing form data from javascript

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" <rgqld@iinet.ne t.auau> wrote in message
news:4XNoe.1907 $Zn.91166@news. optus.net.au...[color=blue]
> Chris Styles wrote:
> [...][color=green]
> > My form is now autogenerated, and form data is stored to file, so I now[/color][/color]
use[color=blue][color=green]
> > an associative array for thte form elements (so that I can loop through[/color][/color]
them[color=blue][color=green]
> > 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[][/color][/color]
associative[color=blue][color=green]
> > 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"[/color]
>
> 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.<formN ame>.<elementNa me>.<...>;
>
> 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;
>[color=green]
> >
> > I have used the same notation that i know works for the "options" array
> > although that's not an associative array.[/color]
>
> It's an HTML collection, which is like an array only different.
>[color=green]
> >
> > Can anyone suggest how I might go about accessing the form elements form
> > javascripts.. google hasnt helped at all :-([/color]
>
> 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[/color]

[RobG]

Re: accessing form data from javascript

Chris Styles wrote:[color=blue]
> 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.. :-)
>[/color]

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.c om/faq>


--
Rob