referencing form elements - problem with variables

[zapzapzapzap64]

Ok, so here's the problem. I have a series of forms on a page,
dynamically generated by php. They represent a multiple choice
question and an empty div for an answer.

They are generated to appear like this:

<form class="standard" action="" method="post" name="question1"
id="question1">
<fieldset>

<input name="q1" id="q1_ans1" value="q1_ans1" type="radio">
<label for="">Possible 1 Praesent luctus aliquet turpis. et
magnis dis parturient montes, nascetur ridiculus mus.</label>

<input class="radio_floated" name="q1" id="q1_ans2"
value="q1_ans2" type="radio">
<label for="">Possible 2 lorem penatibus et magnis dis
parturient montes</label>

<input name="q1" id="q1_ans3" value="q1_ans3" type="radio">
<label for="">Possible 3 lorem penatibus In egestas lacinia
metus. Etiam imperdiet turpis non justo.</label>

</fieldset>

<input name="q1answer" id="q1answer" value="q1_ans3"
type="hidden">

<div id="markanswer_1" class="markanswer"><a
href="javascript:markAnswer(1)"><span>mark answer</span></a></div>
</form>


The next set of questions has identical markup except question 1
becomes question2, q1 becomes q2 etc

The problem I have is that the function markAnswer needs to determine
the correct answer and the supplied answer.

Correct answer is easy, as it is stored in the hidden field in the
form:

function markAnswer(q) {
//get value of correct answer
correct = document.getElementById('q' + q + 'answer');
correctanswer = correct.value;

But I'm having trouble getting the selected radio button.

If I knew that the form being analysed was say, the first one, then I
would simply put:

for( i = 0; i < document.question1.q1.length; i++ ) {
if( document.question1.q1.checked == true )
val = document.question1.q1.value;
}

if (correctanswer == val) {
newText = document.createTextNode('correct') ;
}

This determines if the value of answer in the hidden field matches the
value of the selected radio button.

But I can't seem to manage specifying which form/radio set to analyse,
using the variable 'q' supplied by the markAnswer function.
I have tried:

//get value of selected radio button
var whichform;
whichform = ('question' + q);

var whichelement;
whichelement = ('q' + q);

for( i = 0; i < document.whichform.whichelement.length; i++ ) {
if( document.whichform.whichelement.checked == true )
val = document.whichform.whichelement.value;
}

but no luck. I presume it something to do with whichform and
whichelement being variables and being treated as such in the
document.whichform bit.

Does anyone have any ideas?

 

[David Mark]

Ok, so here's the problem. I have a series of forms on a page,
dynamically generated by php. They represent a multiple choice
question and an empty div for an answer.

They are generated to appear like this:

<form class="standard" action="" method="post" name="question1"
id="question1">
<fieldset>

<input name="q1" id="q1_ans1" value="q1_ans1" type="radio">
<label for="">Possible 1 Praesent luctus aliquet turpis. et
magnis dis parturient montes, nascetur ridiculus mus.</label>

Why are all of your for attributes empty?

<input class="radio_floated" name="q1" id="q1_ans2"
value="q1_ans2" type="radio">
<label for="">Possible 2 lorem penatibus et magnis dis
parturient montes</label>

<input name="q1" id="q1_ans3" value="q1_ans3" type="radio">
<label for="">Possible 3 lorem penatibus In egestas lacinia
metus. Etiam imperdiet turpis non justo.</label>

</fieldset>

<input name="q1answer" id="q1answer" value="q1_ans3"
type="hidden">

<div id="markanswer_1" class="markanswer"><a
href="javascript:markAnswer(1)"><span>mark

Use the onclick event to call the function, not the href attribute.

</form>

The next set of questions has identical markup except question 1
becomes question2, q1 becomes q2 etc

So why start a whole new form with an empty action? You don't really
need forms at all, but I would use one to contain all of the
questions.

The problem I have is that the function markAnswer needs to determine
the correct answer and the supplied answer.

Correct answer is easy, as it is stored in the hidden field in the
form:

function markAnswer(q) {
//get value of correct answer
correct = document.getElementById('q' + q + 'answer');

It is better (faster and more compatible) to reference it as:

document.forms['question1'].elements['q' + q + 'answer']

correctanswer = correct.value;

But I'm having trouble getting the selected radio button.

If I knew that the form being analysed was say, the first one, then I
would simply put:

for( i = 0; i < document.question1.q1.length; i++ ) {
if( document.question1.q1.checked == true )
val = document.question1.q1.value;
}

if (correctanswer == val) {
newText = document.createTextNode('correct') ;

}

This determines if the value of answer in the hidden field matches the
value of the selected radio button.

But I can't seem to manage specifying which form/radio set to analyse,
using the variable 'q' supplied by the markAnswer function.
I have tried:

//get value of selected radio button
var whichform;
whichform = ('question' + q);

var whichelement;
whichelement = ('q' + q);

for( i = 0; i < document.whichform.whichelement.length; i++ ) {
if( document.whichform.whichelement.checked == true )
val = document.whichform.whichelement.value;
}

but no luck. I presume it something to do

It isn't luck. What you are doing is wrong.

with whichform and

whichelement being variables and being treated as such in the
document.whichform bit.

They are strings. document.whichform.whichelement will surely error as
it has nothing to do with the string variables, but is referencing an
undefined "whichform" property of the document object. Since it is
undefined, it has no
"whichelement" property. Use
document.forms[whichform].elements[whichelement].

 

[zapzapzapzap64]

Thanks.

Answers to your questions:

- label "fors" are empty because I didn't want to add them until I had
script that worked and was sure the ids weren't going to change
- form actions are empty because a php-only version is also in
development for non-javascript users


Your solution.
I'm pretty certain I tried it at one stage, but think I mistakenly
used 'element' instead of 'elements'. Anyway, it now works fine. Thank
you