How do you get a click function to work independantly

Hello,

I wonder if you can help me.

I am using the below code and wanted to know if anyone know how to get the function in the JS to work independently on UL's rather interfering with each other.

Basically when the page loads it calls the JS function which checks the inputs on the form for the checked radio button and applies a specific CSS class to set styles and highlight to it's parent LI in the HTML mark-up. It also works out from the click event if you choose another option in the radio button list to remove any styles that may have been applied to any LI's and put the class on the corresponding parent LI of the option you have clicked on

Now the problem lies is that as I am checking it against a form (which houses the UL and children LI's that contain the radio button list) where there are two different radio button lists which breaks the code as it doesn't know which UL in the form to apply the code to. It works fine if I only have one UL so really I need the JS to be a bit more 'cleverer' and run on the corresponding UL that I have clicked on and not affect the other. I still want it to highlight the checked radio button on both lists on page load though

Would greatly appreciate any help.

Thanks
-JaXL

HTML:

<form id="myForm">
<ul id="activityChoices" class="radioList">
		  <li class="radio-item">
			  <input type="radio" id="radio1" name="radio" value="radio1">
			  <label for="radio1">radio1</label>
		  </li>
		  <li class="radio-item">
			  <input type="radio" id="radio2" name="radio" value="radio2">
			  <label for="radio2">radio2</label>
		  </li>
		  <li class="radio-item">
			  <input type="radio" id="radio3" name="radio" value="radio3" checked="checked">
			  <label for="radio3" >radio3</label>
		  </li>
		  <li class="radio-item">
			  <input type="radio" id="radio4" name="radio" value="radio4">
			  <label for="radio4" >radio4</label>
		  </li>
			</ul>
<ul>
<li>
	  <input type="radio" id="yes" name="answer" value="yes">
			  <label for="yes">yes</label>
		  </li>
<li>
	  <input type="radio" id="no" name="answer" value="no">
			  <label for="no">no</label>
		  </li>
</ul>
</form>
<script type="text/javascript">
highlightSelectedRadio('myForm','input');
</script>

Open in new window


JS:

 
function highlightSelectedRadio(myForm, tag) 
{
	var form = document.getElementById(myForm);
	var inputArray = form.getElementsByTagName(tag);
	var prevClass = null;
	
	for (i=0;i<inputArray.length;i++) {
		if(inputArray[i].checked) {
			prevClass = inputArray[i].parentNode.getAttribute("class");
			inputArray[i].parentNode.className += " myclass";
		}	
	}
	
	var myArray = form.getElementsByClassName("myclass");
	form.onclick = function() {
		for (j=0;j<myArray.length;j++) {
			myArray[j].className = prevClass;
		}
		inputArray = this.getElementsByTagName(tag);
		
		for (i=0;i<inputArray.length;i++) {
			if(inputArray[i].checked) {
				inputArray[i].parentNode.className += " myclass";
			}	
		}
}
}

Open in new window

JaXLAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
you need to give the form the ID you have in the call. In this case id="myform"

So for example this should now work
window.onload=function() {
  highlightSelectedRadio('myForm1','input');
  highlightSelectedRadio('myForm2','input');
  
  var inputs = document.getElementsByTagName("input");
  for (var i=0, n=inputs.length; i<n;i++) {
    if (inputs[i].type=="radio") inputs[i].onclick=function() {
        highlightSelectedRadio(this.form.id,'input') },100); // handles any form on the page
    }
  }
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Put the onclick on the input fields and have it change the class of the parentNode instead of clicking the form
0
 
JaXLAuthor Commented:
Thanks mplungjan.  Is it possible you could put that in code form what you just said?
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Michel PlungjanIT ExpertCommented:
sorry, ignore my post. It IS doing what I suggested.

I cannot see what your issue is.

If I add checked="checked" to the yes/no radios, they also get highlighted.
0
 
JaXLAuthor Commented:
Your right the highlight does work if set checked on at least one option on each radio list but the problem comes when you click on another radio within the group it gets confused which radio button list it is originating from and the highlight doesn't work.

Hope that makes sense
0
 
Michel PlungjanIT ExpertCommented:
Here you go. I see you got some solution from SO too.

Here is mine
function highlightSelectedRadio(myForm, tag) {
  var form = document.getElementById(myForm);
  var inputArray = form.getElementsByTagName(tag);

  for (i=0;i<inputArray.length;i++) {
    if (inputArray[i].type=="radio") {
      if (inputArray[i].checked && 
          inputArray[i].parentNode.className.indexOf("myclass")==-1) {
        inputArray[i].parentNode.className += " myclass";  
      }          
      else {
        inputArray[i].parentNode.className = inputArray[i].parentNode.className.replace(" myclass","");
      }
    }      
  }
}    

window.onload=function() {
  highlightSelectedRadio('myForm','input');
  
  var inputs = document.getElementsByTagName("input");
  for (var i=0, n=inputs.length; i<n;i++) {
    if (inputs[i].type=="radio") inputs[i].onclick=function() {
      setTimeout(function() { highlightSelectedRadio('myForm','input') },100);
    }
  }
}

Open in new window

0
 
JaXLAuthor Commented:
I like the way you are thinking here and it's almost what I am looking for but the only issue now is that the onload (that is now in the JS) won't recognise which form it looking in - in this case "myForm", which doesn't exist.  I wanted to keep this as flexible as I can just in case I need to pass other forms.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.