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

saljas
saljas used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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
leakim971Multitechnician
Top Expert 2014

Commented:
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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2016

Commented:
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

Commented:
Many thanks for trying to help

The problem was in the listbox, I do not want it to be visible so I set it visible = False.
Once I changed it's property to listbox.visible = true then every thing works fine

Best regards,

Author

Commented:
I should have used style="visibility:hidden" to make listbox not appear and to have access to the listbox contents
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial