?
Solved

JavaScript to loop through form and select radio buttons

Posted on 2005-03-01
9
Medium Priority
?
10,746 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

752 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