Solved

Code to make fields invisible...  (jQuery)

Posted on 2011-03-08
17
270 Views
Last Modified: 2012-05-11
The following form should only be validated when fields are visible.  The other, "hidden" fields should not be validated.  My question is, how do I make fields "hidden?"  When a user selects "section one" from the dropdown menu, I want section one to be shown and all other sections to be hidden.  Likewise, if the user selects "option two," it will be shown and all other sections will be hidden.
<script type="text/javascript">

$().ready(function() {
	
	// validate signup form on keyup and submit
	$("#signupForm").validate({
                  ignore:":hidden",
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			}
		},
		messages: {
			firstname: "Please enter your firstname",
			lastname: "Please enter your lastname",
			username: {
				required: "Please enter a username",
				minlength: "Your username must consist of at least 2 characters"
			},
		}
	});

});

</script>

<form action="" method="post">

<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>

<!-- BEGIN OPTION ONE -->

		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>

<!-- END OPTION ONE -->

<!-- BEGIN OPTION TWO -->

		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>

<!-- END OPTION TWO -->

</form>

Open in new window

0
Comment
Question by:EMB01
  • 9
  • 8
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 35073182
You may use :

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});

Open in new window


Test page :


<!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 language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
/*		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});
*/		
		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});
		
	});

</script>
</head>
<body>
<form id="signupForm" action="" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
LVL 14

Author Comment

by:EMB01
ID: 35073726
Thanks, that works well; however, when I uncomment the validation function it doesn't work anymore.  Can you help me make it work with the validator?
0
 
LVL 14

Author Comment

by:EMB01
ID: 35073734
This is the validator I'm using, by the way:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
0
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 82

Expert Comment

by:leakim971
ID: 35073878
Check the depedencies section. Use jQuerie 1.3.2 or 1.4.2
0
 
LVL 14

Author Comment

by:EMB01
ID: 35073913
I tried versions 1.4.2 and 1.4.4 but neither work.  Here's my 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="jquery-1.4.2.min.js"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});
		
		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		});
		
	});

</script>
</head>
<body>
<form id="signupForm" action="" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select>
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35074228
Work fine for me :
<!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 language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
			}
		});

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		}).change();
		
	});

</script>
</head>
<body>
<form id="signupForm" action="http://www.experts-exchange.com" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select><input type="submit" value="Submit" />
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname">Firstname </label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
LVL 14

Author Comment

by:EMB01
ID: 35074350
Really?  I copied and pasted your code and it doesn't work at all for me...  I attached a screenshot to show you what it does.
ss030811.jpg
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35074527
Try to clear your cache. Tested on IE8 :
leakim971-417779.flv
0
 
LVL 14

Author Comment

by:EMB01
ID: 35076027
You're right, it does work in IE but not the version of the browser I'm using (IE Version: 8.0.6001.18702).  This is the first time I've ever had something not work in this browser; it's the only browser I ever use.  Do you know of anyway we could fix this?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35076046
Did you cleared your cache? I've the same version.
Clipboard02.gif
0
 
LVL 14

Author Comment

by:EMB01
ID: 35076507
I tried clearing my cache but it still won't work.  The browser that I use is that version of IE, but it's called slimbrowser:

http://www.slimbrowser.net/en/

It's a really great browser, and I've never had something fail in it before.  Does this mean the script won't work in any previous versions of IE?  Is there anyway to make this cross-browser?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35076568
Could you confirm the jquery.validate plugin is in the same folder of the page ?
0
 
LVL 14

Author Comment

by:EMB01
ID: 35076649
Yes, it's in the same folder.  Maybe, can we make the script simpler so that it works on older browsers?  I'm just guessing...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35076732
We're using jQuery... Especially for browser compatibilty
I run a test on http://browsershots.org
Currently it look fine on most of browsers.
In slimbrowser it look like JS is not enabled...
0
 
LVL 14

Author Comment

by:EMB01
ID: 35076778
Hmm...  I was working until I uncommented the validation part.  There must be some sort of incompatibility between the two.  Perhaps, there's another way of writing the same code?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35076982
> Perhaps, there's another way of writing the same code?

1 billion but you will have the same result if the problem come from your browser, your configuration or your integration.
You can test the page with toolos like http://browsershots.org

I see you've multiple time the same id try this :


<!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 language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

	$(document).ready(function() {
		
		// validate signup form on keyup and submit
		$("#signupForm").validate({
					  ignore:":hidden",
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				}
			}
		});

		$("select").change(function() {
			$(".section").hide();
			var indexOfToShow = $("select>option:selected").index("select>option");
			$(".section:eq(" + indexOfToShow + ")").fadeIn("slow");
		}).change();
		
	});

</script>
</head>
<body>
<form id="signupForm" action="http://www.experts-exchange.com" method="post">
<select>
  <option value="volvo">Option one</option>
  <option value="saab">Option two</option>
</select><input type="submit" value="Submit" />
<!-- BEGIN OPTION ONE -->
<div class="section">
		<p>
			<label for="firstname1">Firstname </label>
			<input id="firstname1" name="firstname" />
		</p>
		<p>
			<label for="lastname1">Lastname</label>
			<input id="lastname1" name="lastname" />
		</p>
</div>
<!-- END OPTION ONE -->
<!-- BEGIN OPTION TWO -->
<div class="section">
		<p>
			<label for="firstname2">Firstname</label>
			<input id="firstname2" name="firstname" />
		</p>
		<p>
			<label for="lastname2">Lastname</label>
			<input id="lastname2" name="lastname" />
		</p>
</div>
<!-- END OPTION TWO -->
</form>
</body>
</html>

Open in new window

0
 
LVL 14

Author Closing Comment

by:EMB01
ID: 35077030
Thanks so much!  That worked very well.  I can't spot what's different, though.  I'll have to give it a closer inspection.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 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