Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

JavaScript to loop through form and select radio buttons

Posted on 2005-03-01
9
Medium Priority
?
10,748 Views
Last Modified: 2008-01-09
Hi

I have a page that contains a number of sets of four radio buttons, written as a loop in php. At the top, I want to have four buttons you can click on to get all the sets checked. As in click the first button, and the first radio button in all the sets gets selected. I did the same for a row of checkboxes, but I'm unable to get the code for the radio buttons to work. What am I doing wrong? Note that this code isn't all mine, I've scrounged the net and put together code from examples. Test is the name of the form, and the *_buttons are the names of the buttons.

window.onload=function()
{
      
    document.getElementById("ok_button").onclick = checkallradio;
    document.getElementById("mindre_button").onclick = checkallradio;
    document.getElementById("store_button").onclick = checkallradio;
    document.getElementById("notdone_button").onclick = checkallradio;
};

function checkallradio() {
   for (var j=0;j < document.test.length;j++)
   {
         if (document.test.elements[j].type == 'radio') {
      {
            objEl = document.test.elements[j];
        //Test which 'checkall' button was clicked. 'this'
        //refers to the button that was clicked:
        switch (this.id)
        {
        case "ok_button":
            //then check first radio button
            //in the group:
            objEl[0].checked=true;
            break;
        case "mindre_button":
            //then check second radio button
            //in the group:
            objEl[1].checked=true;
            break;
        case "store_button":
            //then check third radio button
            //in the group:
            objEl[2].checked=true;
            break;
        case "notdone_button":
                    //then check fourth radio button
                    //in the group:
                    objEl[3].checked=true;
                    break;
        }
    }
}  

0
Comment
Question by:SunKing
  • 5
  • 4
9 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13427908
You have some problems with  your curly brackets.

function checkallradio() {
   for (var j=0;j < document.test.length;j++)
   {
        if (document.test.elements[j].type == 'radio') {
            objEl = document.test.elements[j];
            //Test which 'checkall' button was clicked. 'this'
            //refers to the button that was clicked:
            switch (this.id) {
                case "ok_button":
                    //then check first radio button
                    //in the group:
                    objEl[0].checked=true;
                    break;
                case "mindre_button":
                    //then check second radio button
                    //in the group:
                    objEl[1].checked=true;
                    break;
                case "store_button":
                    //then check third radio button
                    //in the group:
                    objEl[2].checked=true;
                    break;
                case "notdone_button":
                          //then check fourth radio button
                          //in the group:
                          objEl[3].checked=true;
                          break;
            }
        }
    }
}
0
 
LVL 5

Author Comment

by:SunKing
ID: 13428181
Thanks, but that did not help. When I press the buttons I get the error: ObjEl.0 is zero or not an object.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13428249
OK, the problem is that it's looping through all of the radio buttons as single items. It doesn't treat all the items with the same name as one input.

Try this instead:


      function checkallradio() {
            var myArray = new Array();
         for (var j=0;j < document.test.length;j++)
         {
              if (document.test.elements[j].type == 'radio') {
                  objEl = document.test.elements[j];
                  if(!myArray[objEl.name]){
                        myArray.push(objEl.name);      

                        //Test which 'checkall' button was clicked. 'this'
                        //refers to the button that was clicked:
                        switch (this.id) {
                            case "ok_button":
                                //then check first radio button
                                //in the group:
                                document.test.elements[objEl.name][0].checked=true;
                                break;
                            case "mindre_button":
                                //then check second radio button
                                //in the group:
                                document.test.elements[objEl.name][1].checked=true;
                                break;
                            case "store_button":
                                //then check third radio button
                                //in the group:
                                document.test.elements[objEl.name][2].checked=true;
                                break;
                            case "notdone_button":
                                      //then check fourth radio button
                                      //in the group:
                                      document.test.elements[objEl.name][3].checked=true;
                                      break;
                        }
                  }
              }
          }
      }
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Author Comment

by:SunKing
ID: 13428272
Now the code runs, but doesn't do anything. Does it matter if one button in a set is already selected? Like, if button 2 is already selected, it will select button 0 instead when the "ok_button" is pressed? Or am I missing something else?
0
 
LVL 32

Accepted Solution

by:
Batalf earned 1000 total points
ID: 13428396
Here's my working example. I have removed the myArray[] checked which I implemented during testing.

<html>
      <head>
      <script type="text/javascript">
      window.onload=function()
      {
          
          document.getElementById("ok_button").onclick = checkallradio;
          document.getElementById("mindre_button").onclick = checkallradio;
          document.getElementById("store_button").onclick = checkallradio;
          document.getElementById("notdone_button").onclick = checkallradio;
      };
      
      function checkallradio() {
         for (var j=0;j < document.test.length;j++)
         {
              if (document.test.elements[j].type == 'radio') {
                  objEl = document.test.elements[j];
                  //Test which 'checkall' button was clicked. 'this'
                  //refers to the button that was clicked:
                  switch (this.id) {
                      case "ok_button":
                          //then check first radio button
                          //in the group:
                          document.test.elements[objEl.name][0].checked=true;
                          break;
                      case "mindre_button":
                          //then check second radio button
                          //in the group:
                          document.test.elements[objEl.name][1].checked=true;
                          break;
                      case "store_button":
                          //then check third radio button
                          //in the group:
                          document.test.elements[objEl.name][2].checked=true;
                          break;
                      case "notdone_button":
                                //then check fourth radio button
                                //in the group:
                                document.test.elements[objEl.name][3].checked=true;
                                break;
                  }
                
              }
          }
      }
      </script>
      </head>
      <body>
      <form name="test">
      <input type="button" id="ok_button" value="1">
      <input type="button" id="mindre_button" value="2">
      <input type="button" id="store_button" value="3">
      <input type="button" id="notdone_button" value="4"><br>
      <input type="radio" value="1" name="radio1"><input type="radio" value="2" name="radio1"><input type="radio" value="3" name="radio1"><input type="radio" value="4" name="radio1"><br>
      <input type="radio" value="1" name="radio2"><input type="radio" value="2" name="radio2"><input type="radio" value="3" name="radio2"><input type="radio" value="4" name="radio2"><br>
      <input type="radio" value="1" name="radio3"><input type="radio" value="2" name="radio3"><input type="radio" value="3" name="radio3"><input type="radio" value="4" name="radio3"><br>
      
      
      
      </form>
</body>
</html>
0
 
LVL 5

Author Comment

by:SunKing
ID: 13428462
Thanks, it works now!
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13428475
Happy to help!

Thanks for the "A"

mindre_button, store_button -- are you a norwegian too?

Batalf
0
 
LVL 5

Author Comment

by:SunKing
ID: 13428693
Yeah, that's right. And you deserved the A. "Store problemer", "Mindre problemer". ;)
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13428748
Takk!

Ha en fin dag

Batalf
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question