Brant MessengerA virtual view into my life.

In recent days I’ve been working on the ability to print forms. For the sake of KISS principle I used the same form, for printing, that was used for data entry. I figured that the CSS would handle the look and feel. And for security I would use jQuery to disable the fields. Everything worked great as long as you don’t use Microsoft Internet Explorer. It seems that CSS in IE will not allow you to style a disabled form element. Here is a simple fix using jQuery to handle this. You may modify as needed. Let me know what you think and post back new modifications.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

securePrintInput = function() {
 
	$(":input").each(function(){
		if ($(this).val() == "" || ($(this).context.type == "checkbox" && $(this).attr("checked") == false)) {
			$(this).attr("disabled","disabled");
		}
		else {
			if ($(this).context.type == "text") {
				$(this).keydown(function(){
					return false;
				});
			}
			else if ($(this).context.type == "checkbox") {
				$(this).click(function(){
					$(this).attr("checked","checked");
				})
			}
			else if ($(this).context.type == "select-one") {
				$(this).keydown(function(){
					return false;
				});
				$(this).find("option").each(function(){
					if ($(this).attr("selected") == false) $j(this).remove();
				});
 
			}
		}
	});
}

Tags: forms, ie, javascript, jquery, LinkedIn

This entry was posted on Tuesday, January 19th, 2010 at 1:51 pm and is filed under Web Development. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.