referencing form elements - problem with variables

Discussion in 'Javascript' started by zapzapzapzap64@hotmail.com, Jul 13, 2007.

  1. Guest

    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?
     
    , Jul 13, 2007
    #1
    1. Advertising

  2. David Mark Guest

    On Jul 13, 5:37 am, wrote:
    > 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.

    answer</span></a></div>
    > </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].
     
    David Mark, Jul 13, 2007
    #2
    1. Advertising

  3. Guest

    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

    > document.forms[whichform].elements[whichelement].
     
    , Jul 13, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. njsimha
    Replies:
    0
    Views:
    453
    njsimha
    Sep 12, 2008
  2. libsfan01
    Replies:
    2
    Views:
    143
    libsfan01
    Jul 13, 2006
  3. Replies:
    4
    Views:
    210
  4. Referencing form elements

    , Oct 15, 2006, in forum: Javascript
    Replies:
    5
    Views:
    94
    Matt Kruse
    Oct 15, 2006
  5. N. Sloane
    Replies:
    2
    Views:
    120
    Thomas 'PointedEars' Lahn
    Apr 8, 2010
Loading...

Share This Page