?
Solved

How do you get a click function to work independantly

Posted on 2011-10-10
7
Medium Priority
?
276 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:JaXL
  • 4
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36943546
Put the onclick on the input fields and have it change the class of the parentNode instead of clicking the form
0
 

Author Comment

by:JaXL
ID: 36944948
Thanks mplungjan.  Is it possible you could put that in code form what you just said?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36947675
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:JaXL
ID: 36947742
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36948930
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
 

Author Comment

by:JaXL
ID: 36949170
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 36950973
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

Featured Post

Technology Partners: 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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
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 how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 6 hours left to enroll

840 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