asked on

looping through a radio groop to use the selected radio serial in getting the listbox item

I am looping within a radio group, getting the selected radio and then using it's order to get the data from a listbox, so if the selected radio is number 5 then textbox1 must contain item 5 of the listbox1, here is my code (which is not working)

<script>
function myFunction() {
var AllListItems = document.getElementById("ListBox1");
var WantedRadio = document.getElementsByName("CheckedRadio");
var RadioGroupLength = WantedRadio .length;

for (var i = 0; i < RadioGroupLength ; i++) {
if (WantedRadio[i].type == 'radio' && WantedRadio[i].checked == true)
document.getElementById("TextBox1").value = inputfields[i].value; //this line works fine
document.getElementById("TextBox1").value = AllListItems.options[i].value; //this line does not work

}
}
</script>

Julian Hansen

Here is a jQuery version
HTML

<select id="listbox">
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
  <option value="4">Item 4</option>
  <option value="5">Item 5</option>
</select>
<p><i>Note radio buttons in their own container - is important: ensures index is calculated correctly</i></p>
<div>
  <input type="radio" name="radio_group" value="1"> One
  <input type="radio" name="radio_group" value="2"> Two
  <input type="radio" name="radio_group" value="3"> Three
  <input type="radio" name="radio_group" value="4"> Four
  <input type="radio" name="radio_group" value="5"> Five
</div>
Result <input type="text" id="result_text">

Open in new window

jQuery

<script>
$(function(){
  var options = $('#listbox option');
  $('input[name="radio_group"]').click(function() {
    var index = $(this).index();
    result_text.value = options[index].innerHTML;
  });
})
</script>

Open in new window

EDIT: Fix code error in JQuery
You can see this working here
I will post a JavaScript only version shortly

leakim971

Did you miss the curly braces ?
So replace :

            if (WantedRadio[i].type == 'radio' && WantedRadio[i].checked == true)
                document.getElementById("TextBox1").value = inputfields[i].value;  //this line works fine
                document.getElementById("TextBox1").value = AllListItems.options[i].value;  //this line does not work

Open in new window

by :

                if (WantedRadio[i].type == 'radio' && WantedRadio[i].checked == true) {
                    document.getElementById("TextBox1").value = inputfields[i].value;  //this line works fine
                    document.getElementById("TextBox1").value = AllListItems.options[i].value;  //this line does not work
                }

Open in new window

Julian Hansen

Here is why your function was not working

You have an if statement (checking for a checked state on the radio button) but you don't enclose the following statements in { }, So the first line fires only when a checked radio is found - the second executes on each iteration of the loop.

This code should work

function myFunction() {
  var AllListItems = document.getElementById("ListBox1");
  var WantedRadio = document.getElementsByName("CheckedRadio");

  for (var i = 0; i < WantedRadio.length ; i++) {        
    if (WantedRadio[i].checked) {
      document.getElementById("TextBox1").value = inputfields[i].value;  //this line works fine
      document.getElementById("TextBox1").value = AllListItems.options[i].value;  //this line does not work
    }
  }
}

Open in new window

Bear in mind this will put the option VALUE in the text box - not the displayed text.

General rule - always use { } for your code blocks on an if - even if there is only one line - it will save you from errors like these.

David Johnson, CD

why keep looping once it has been found?

for (var i = 0; i < RadioGroupLength ; i++) {        
            if (WantedRadio[i].type == 'radio' && WantedRadio[i].checked == true)
                 {
                document.getElementById("TextBox1").value = inputfields[i].value;  //this line works fine
                document.getElementById("TextBox1").value = AllListItems.options[i].value;  
                break;  
               }
}

Open in new window

ASKER CERTIFIED SOLUTION

Salah a a a Al Jasem

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Salah a a a Al Jasem

ASKER

I should have used style="visibility:hidden" to make listbox not appear and to have access to the listbox contents

Julian Hansen

On reflection the function code makes no sense with or without { }
Either way
This

document.getElementById("TextBox1").value = inputfields[i].value;  //this line works fine

Open in new window

Will always get overwritten by this

document.getElementById("TextBox1").value = AllListItems.options[i].value;  //this line does not work

Open in new window