SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Can't iterate through groups of radio buttons?

    Hi,

    I've been looking around the web and forums for the past few days now. Javascript is not my forte but I am beginning to understand more of it. My issue is perhaps in the method that I have tried to concatenate a variable to my radio buttons.

    The scenario:

    I have about 10 groups of radio buttons , each with 4 options.

    radioname1[0]
    radioname1[1]
    radioname1[2]
    radioname1[3]

    radioname2[0]
    radioname2[1]
    etc...

    I know how to put a variable into (or more like assign a variable to the array index of a SINGLE radio button group)
    Code:
    document.form.radioname1[i].value
    but what I need to know is how to assign a variable to the radioname, so that I can iterate through each radionameVARIABLEHERE[i].value ?

    I have been looking and trying to for days. All I really need to know is how to get a variable into the radiobutton name. I know how to use a for loop to get this to iterate through it all but its just the syntax that isn't playing nice.

    Any help on this would be much appreciated ASAP

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a more basic part of javascript. You can use two syntaxes to access an object property.

    For example, the length property of an array object can be accessed either like
    myArray.length or myArray["length"]

    So,
    Code:
    var name = "radioname1[" + i + "]"; // radioname1[3]
    document.form[name].value

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post

    So,
    Code:
    var name = "radioname1[" + i + "]"; // radioname1[3]
    document.form[name].value
    Thanks I got that part working but I can't seem to increment the actual "radioname"

    I'm trying to iterate through for example 8 radio groups , each group has 4 options.

    The issue is not being able to concatenate to the radioname[variablenumberhere][indexhere] , The index bit works but how do I get that variablenumberhere assigned?

    I tried :
    (note my form radio names are : que1 .... que8)

    var i = 1;
    var currRadio = "que" + i;
    document.form.currRadio[i].checked = true;

    It should result in : document.form.que1.cheked =true; ? Or at least that is what my intention is.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Instead of

    var i = 1;
    var currRadio = "que" + i;
    document.form.currRadio[i].checked = true;

    You need it to read

    var i = 1;
    var currRadio = "que" + i;
    document.form[currRadio][j].checked = true;

    where j is the particular button within the group you want checked (since i is a part of the name of the group)
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by felgall View Post

    You need it to read

    var i = 1;
    var currRadio = "que" + i;
    document.form[currRadio][j].checked = true;

    where j is the particular button within the group you want checked (since i is a part of the name of the group)
    You're a LEGEND Felgall, funny I was almost going to contact you on your old site that I stumbled upon earlier, but thought you might have changed your email since that post (it was in 2000)


    So this is what I did just to test this all out .

    Code:
    <FORM name="form" method="post">
     Question 1
        <INPUT type="radio" name="que1" value="1"> right
        <INPUT type="radio" name="que1" value="0"> wrong<BR>
        Question 2
        <INPUT type="radio" name="que2" value="1"> right
        <INPUT type="radio" name="que2" value="0"> wrong<BR>
        
        
      
       
     </FORM>
    
    
    <script type="text/javascript">
    function check(){
    var i = 1;
    var j = 1;
    var currRadio = "que" + i;
    document.form[currRadio][j].checked = true;
    
    }
    
    check();
    
    </script>
    Thank you all very much for the help , now to put this in a FOR loop so that I can have a function that will show all the correct answers in a quiz. I will post my findings here.

  6. #6
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok interestingly enough this should work shouldn't it?
    Code:
     <FORM name="form" method="post">
     Question 1
        <INPUT type="radio" name="que1" value="1"> right
        <INPUT type="radio" name="que1" value="0"> wrong<BR>
        Question 2
        <INPUT type="radio" name="que2" value="0"> wrong
        <INPUT type="radio" name="que2" value="1"> right<BR>
        
       
     </FORM>
    
    
    <script type="text/javascript">
    function check(){
    var i = 1;
    var j = 0;
    var currRadio = "que" + i;
    
    
    if (document.form.[currRadio][j].value = 1){
    document.form[currRadio][j].checked = true;
    }
    
    }
    
    check();
    
    </script>
    That If statement should be true, I've tried
    Code:
    document.form.[currRadio][j].value = 0
    as well but the IF statement does not resolve. When I try manually with
    Code:
    if (document.form.que1[0].value = 1){document.form[currRadio][j].checked = true;  }
    It works, but I need to use the variables like i've done earlier.

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    = is the assignment operator. You probably meant to use a comparison operator like ==

  8. #8
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a go at that, thinking too that it may be the =, but no dice. I'm stumped with this one. Any suggestions?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,826
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you fix the form so as to label the radio buttons properly so that they can be selected by clicking on the label as well as the button then you'd be able to reference each button by its id instead of using the old form collection.

    Code:
    <FORM name="form" method="post">
     Question 1
        <INPUT type="radio" name="que1" id="que1a" value="1"><label for="que1a"> right</label>
        <INPUT type="radio" name="que1" id="que1b" value="0"><label for="que1b"> wrong</label><BR>
        Question 2
        <INPUT type="radio" name="que2" id="que2a" value="1"><label for="que2a"> right</label>
        <INPUT type="radio" name="que2" id="que2b" value="0"><label for="que2b"> wrong</label><BR>
        
        
      
       
     </FORM>
    You would then be able to use document.getElementById to reference the values.

    Also the reason why document.form.que1[0].value == 1 isn't working is because that particular button has a value of 0 and so that statement is always false.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a good idea felgall, I attempted with this method

    Code:
    <script type="text/javascript">
    function check(){
    var questions = [document.form.que1, document.form.que2, document.form.que3, document.form.que4, document.form.que5, document.form.que6, document.form.que7, document.form.que8];
    //question numbers must be assigned to array 
    
    
    var grp, x, y;
    var acc = Array(7);
    // change array number for number of questions
    for(x = 0; x < 7; x++){
    acc[x] = 0;
    
    for(y = 0; y < questions.length; y++){
    grp = questions[y];
    
    if(grp[x].value == 1){
    grp[x].checked = true;
    acc[x] = acc[x] + 1;
    
    			}
    		}
    	}
    
    }
    </script>
    IT WORKS...but
    I've assigned each question to an array. I'm sure theres a better way to do this? I'm trying to use the getElementById method but how would I use that with my existing code? Because each quiz will have different length of questions , it would be silly for me to assign them to the array each time and not to mention increase the acc array size to fit the quiz?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •