another document.[formName] has no properties error

[michael]

apologies in advance, as not only am i new to learning how to code
javascript properly, i'm new to the groups posting thing...

i am developing in firefox 1.0+, but will be working in an msie 6.0+
produciton environment ( not my choice, but when is it ever? ).

the desired output is that when the end-user selects two radio buttons,
one from each 'group', the form / page will open an alert window
displaying the values of the radio buttons selected without having the
end-user left-click on a submit button.

i cannot figure out why I'm getting the "document.[formName] has no
properties" error mesasage in the javascript console.

any advice, assistance, comments or suggestions will be appreciated.

michael
this is what i've got thus far - - -

( located within the head tags )

<script language = "javascript" type = "text/javascript">
var myFirstVariable = "";
var mySecondVariable = "";

function optionSelected ()
{
for (i = 0; i < 4; i++);
{
if (document.[formName].myFirstVariable[i]checked == true);
{
firstVariableName = document.[formName].myFirstVariable.value;
}
}
for (i = 0; i < 1; i++);
{
if (document.[formName].mySecondVariable[i].checked == true);
{
seconVariableName = document.[formName].mySecondVariable.value;
}
}
alert("the radio buttons selected were + " + firstVariableName + " and
" + secondVariableName + ".");
}

</script>

....and then my form looks like...

( located within the body tags )

<form name = "formName">
<p>
<input type = "radio" name = "myFirstVariable" value = "option1"
onClick = "optionSelected()">Option1<br>
<input type = "radio" name = "myFirstVariable" value = "option2"
onClick = "optionSelected()">Option2<br>
<input type = "radio" name = "myFirstVariable" value = "option3"
onClick = "optionSelected()">Option3<br>
<input type = "radio" name = "myFirstVariable" value = "option4"
onClick = "optionSelected()">Option4<br>
<input type = "radio" name = "myFirstVariable" value = "option5"
onClick = "optionSelected()">Option5<br>
</p>
<p>
<input type = "radio" name = "mySecondVariable" value = "option1"
onClick = "optionSelected()">Option1<br>
<input type = "radio" name = "mySecondVariable" value = "option2"
onClick = "optionSelected()">Option2<br>
</p>
</form>

[Janwillem Borleffs]

michael wrote:

function optionSelected ()
{
for (i = 0; i < 4; i++);

The semicolon should be omitted here.
{
if (document.[formName].myFirstVariable[i]checked == true);
{

Again, the semicolon should be omitted here and the form field should be
referenced as follows:

document.forms[formName].elements['myFirstVariable'][i].checked
JW

[RobG]

michael wrote:

apologies in advance, as not only am i new to learning how to code
javascript properly, i'm new to the groups posting thing...

i am developing in firefox 1.0+, but will be working in an msie 6.0+
produciton environment ( not my choice, but when is it ever? ).

the desired output is that when the end-user selects two radio buttons,
one from each 'group', the form / page will open an alert window
displaying the values of the radio buttons selected without having the
end-user left-click on a submit button.

i cannot figure out why I'm getting the "document.[formName] has no
properties" error mesasage in the javascript console.

any advice, assistance, comments or suggestions will be appreciated.

michael
this is what i've got thus far - - -

( located within the head tags )

<script language = "javascript" type = "text/javascript">
The language attribute is depreciated, keep the text attribute. You
may find it easier to read your code if you don't leave spaces between
the attribute name, the '=' and the value:

<script type="text/javascript">

var myFirstVariable = "";
var mySecondVariable = "";
You have made two global variables that clash with the names you've
used in your forms. They may make life difficult, so either chose
better names or don't use them at all.

function optionSelected ()
{
for (i = 0; i < 4; i++);
If you declare variables inside a function without using 'var', the
variables become global. That can cause real problems with counters
in particular. Always keep variables local unless there is a really
good reason for them to be global.

for (var i=0; i<4; i++);

{
if (document.[formName].myFirstVariable[i]checked == true);

You have a couple of problems here. Firstly, you are using square
brackets incorrectly - they are used to access a property of an
object, they can't be used on their own. Read the FAQ:

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

Given that your form is called 'formName', you can reference it as:

document.formName;
or
document.forms['formName'];

The second method is preferred. You can generally do the same thing
with form controls:

document.formName.myFirstVariable;
or
document.forms['formName'].elements['myFirstVariable'];

or some combination of the two. Again, the second is preferred.

*But*, whenever there are a number of form controls with the same name
(like radio buttons) then you will get back a collection, not a single
element:

var rButtons = document.formName.myFirstVariable;

Now, to get the one that is checked:

var firstSelected;
for (var i=0, j=rButtons.length; i<j; i++){
if (rButtons[i].checked){
firstValue = rButtons[i].value;
}
}

Note that you don't have to compare (rButtons[i].checked == true)
because if it's checked, rButtons[i].checked will return true anyway
(or false if it's not).

Often the best way to get a reference to something that has been
clicked on is to use 'this', it give a reference directly to the
element without the hassle of hard-coded form or control names.
Here's some play code that should get you going:

<script type="text/javascript">

function showChecked(f)
{
var el;
var message = '';
var buttonNames = ['myFirstVariable','mySecondVariable'];

for (var i=0, j=buttonNames.length; i<j; i++){
el = f.elements[buttonNames[i]];
message += buttonNames[i] + ': ' + getValue(el) + '\n';
}
alert(message);
}

function getValue(r)
{
var i=r.length;
while (i--){
if (r[i].checked) return r[i].value;
}
return 'None selected';
}

</script>

<form name="formName" action="" onclick="showChecked(this);">
<p>
<input type="radio" name="myFirstVariable"
value="option1">Option1<br>
<input type="radio" name="myFirstVariable"
value="option2">Option2<br>
<input type="radio" name="myFirstVariable"
value="option3">Option3<br>
<input type="radio" name="myFirstVariable"
value="option4">Option4<br>
<input type="radio" name="myFirstVariable"
value="option5">Option5<br>
</p>
<p>
<input type="radio" name="mySecondVariable"
value="option1">Option1<br>
<input type="radio" name="mySecondVariable"
value="option2">Option2<br>
</p>
</form>
Incidentally, at least one radio button should always be selected.

[...]
--
Rob

[michael]

Janwillem,

thanks for the heads up.

remeber reading that there's supposed to be a semicolon at the end of
each sentence.

i see how i was making some assumptions in my coding in trying to
retrieve the values selected from the form.

michael

[michael]

Rob,

thanks for the example. now i'm just trying to get it working with the
real stuff.

a couple questions if i may, as i'm just wanting to get a better
understanding of the thought process -

1. what does the f in the showChecked (f) function represent? ( same
would be asked about the variable el within the same function and the r
in getValue (r) function)

2. how would you suggest working in an "if" so that the script wouldn't
run unless a radio button from each group were selected? ( i know the
script would be run for both selections, i mean to not show the alert
until both have been selected )

michael

[Michael Winter]

On 10/10/2005 17:55, michael wrote:

[snip]

remeber reading that there's supposed to be a semicolon at the end of
each sentence.

It is good practice to include a semicolon at the end of most
statements, but control structures are generally an exception; they
should be followed by blocks.

myFunction(...);
myVariable = ...;
return myValue;

but

if(...) {...}
while(...) {...}

[snip]

Mike
Please quote /relevant/ material when replying to posts in this group
(as demonstrated above). If you have to use Google Groups, use the 'show
options' link and select 'Reply' from the revealed panel (not the later
link).

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Randy Webb]

michael said the following on 10/10/2005 12:55 PM:

Janwillem,
This is Usenet, not email. Quote what you are replying to please. It
makes the conversation easier to follow.
thanks for the heads up.

remeber reading that there's supposed to be a semicolon at the end of
each sentence.
"Supposed to be"? No.
Recommended? Yes, in some places.
But, I have yet to see a script that will properly execute with a ; at
the end but won't execute without it.
i see how i was making some assumptions in my coding in trying to
retrieve the values selected from the form.

Ain't scripting fun?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

[Randy Webb]

michael said the following on 10/10/2005 1:06 PM:

Rob,

thanks for the example. now i'm just trying to get it working with the
real stuff.

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly