Problem with jquery logic

Question

jaykom 0 Newbie Poster

15 Years Ago

$(document).ready(function() {
	var childrenEle;
function toggleReq() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
		$("#" + id).children().not("div,legend").each(function () {
		var divEle = $("div").attr('id');
	if($(this).attr('class') == 'required') {
					$(this).css("display","block");	
				}
				else {
					$(this).css("display","none");
				}				
			});
			
	});
}
function toggleAll() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
	$("#" + id).children().each(function () { $(this).css("display","block");									
			});
	});
}

$("div").toggle(
	function toggle() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().each(function () {				$(this).css("display","block");									
			});
	});
},
function() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().not("div,legend").each(function () {
				
		if($(this).attr('class') == 'required') {
					$(this).css("display","block");					
				}
				else {
					$(this).css("display","none");
				}
			});
	});
}
);

/*$("div").toggle(function(){ 
			  	toggleAll()
			},function(){ 
				toggleReq()				  
	}); */ 
$.onload = toggleReq(); 
});
</script>
	</head>
	<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend><div id="toggle1">Click Here</div>
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" /><label class="required" for="radio-0-0">Green</label>
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" /><label class="required" for="radio-0-1">Red</label>
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" /><label for="radio-0-2">Orange</label>       
	    </fieldset>
	    <fieldset class="fieldsetClass" id="question-1"><div id="toggle2">Click Here</div>
	        <legend>Question 2</legend>
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" /><label for="radio-1-0">21</label>
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" /><label class="required" for="radio-1-1">11</label>
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" /><label class="required" for="radio-1-2">23</label>     
	    </fieldset>
</form>

Hi Folks, From the pasted above code I am trying to loop through every fieldset element with jquery each function, and again iam using one more jquery each function for looping through the every child element - this is the common idea for looping both the functions - toggleReq(), toggleAll().

In toggleReq() through looping Iam segregating the child elements which has got CLASS ATTRIBUTE value as "REQUIRED" and displaying them and hiding rest of the child elements.

So during page onload iam displaying only the child elements which have got CLASS ATTRIBUTE value as "REQUIRED" thru jquery onload.

In toggleAll() iam looping through all child elements and displaying all the required and optional child elements even.

I hope now you guys got the explanations for both the functions

But there is one trap here, the thing is like there should be one clickable icon for every fieldset, so when the user clicks the
icon it should display all the child elements and when click again it should display only the REQUIRED fields, basically like toggling :) and this toggling should happen only for one fieldset element at a time.

In my code this toggling happens simultaneously for all the fieldset elements and this is not the correct one.

Please any one help me out how to make this toggling function should work independent for the fieldset elements.

please help me out with some ideas for this..

Thanks
jaykom

javascript jquery

2 Contributors
1 Reply
114 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by mschroeder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mschroeder 251 Bestower of Knowledge Team Colleague · Answer 1 · 2009-06-17T23:39:11+00:00

I think I have achieved what you were describing. There is some consolidation that could occur as there is minor repetitive code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	function toggleReq()
	{
		$(':input.required').each( function() {
			$(this).show();
			$(this).next('label.required').show();
		});
	}
	
	$('.toggle').toggle(
		function() {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				$(this).show();
				$(this).next('label').show();
			});
		},
		function () {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				if( !$(this).hasClass('required') )
				{
					$(this).hide();
					$(this).next('label').hide();
				}
			});
		}
	);
	
	
$.onload = toggleReq(); 
});
</script>
<style>
	input
	{
		display: none;
	}
	label
	{
		display: none;
	}
</style>
</head>

<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
    
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend>
            <div class="toggle">Click Here</div>
            
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" />
            <label class="required" for="radio-0-0">Green</label>
            
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" />
            <label class="required" for="radio-0-1">Red</label>
            
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" />
            <label for="radio-0-2">Orange</label>       
	    </fieldset>
        
	    <fieldset class="fieldsetClass" id="question-1">
	        <legend>Question 2</legend>
            <div class="toggle">Click Here</div>
            
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" />
             <label for="radio-1-0">21</label>
             
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" />
             <label class="required" for="radio-1-1">11</label>
             
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" />
             <label class="required" for="radio-1-2">23</label>     
	    </fieldset>
        
	</form>
</body>
</html>

I didnt make any changes to your form EXCEPT i changed the toggle divs to have a class of toggle instead of unique id's. This allows us to bind the same toggle event to every toggle div.

I also set the styles for input and label display:none right off the bat and then only turn on the elements with the class "required".

The rest of it is just basic jquery function calls.
I tested it locally and get the functionality i believe you described so have at it and i'll try to answer any questions you might have regarding the code.

I think if i was to streamline this even further, I would switch the order of the toggle functions and then simply trigger the toggle event on page load instead of having two separate methods...but this is just a proof of concept.