One of the best ways to save space on a busy iForm and make it easier to read is to only show certain pieces of information when they are relevant. For instance, if you have an order with prompts that need to be filled in, you can hide the supporting prompts until the order is selected and in most iForms, that means checking a checkbox.
So today, we'll look at how to hide and show an element on your iForm based on when a checkbox is checked / unchecked. Up until this point on the blog, I've mainly focused on how to get things done using the jQuery JavaScript framework, but today I've decided to be more inclusive and include the instructions on how to do this using "native JavaScript" as well. For each method, I've included two examples: one example of showing / hiding an inline prompt and one example of showing / hiding whole orders.
Native JavaScript (non-jQuery)
Example 1 - Prompts
Vital Signs
Example 2 - Sub orders
| Main Order |
In the head of the page, you would add the following function:
The JavaScript Code
function toggleVisible(objName, chkBox) {
document.getElementById(objName).style.display = (chkBox.checked) ? "" : "none";
}
In these two examples, you can see that the checkboxes each have an onclick attribute. I could have included the entire code inline (and some folks do that), but since the functionality is largely the same, I decided to call a function instead to consolidate the code. When you do it this way, it becomes easier to add functionality later and to fix issues that may arise since you don't have to search / replace code throughout your page.
The toggleVisible function gets called with two parameters: objName and chkBox. If you look at the HTML code where the function is called, you'll see that it's called with the name of the object to be toggled as a string and "this." In JavaScript, the this object is context dependent, just like in real life. Think of it as a person holding something in their hands. They say, "What is this?" If they were to then put the object down and pick up something different, the answer would therefore be different.
So when I pass this as my second parameter to the toggleVisible function, the function calls it chkBox and can reference attributes about the checkbox: in this case, we care whether it is checked.
That brings us to the line that actually sets whether or not the named object will be hidden. You may or may not be familiar with this particular kind of syntax - it's called a "ternary operator" and is a useful shortcut for cutting down clunky if/then code. Instead of saying if (myVar == true) { x = 1; } else { x = 2; }, you can use this functionality to say x = (myVar) ? 1 : 2;. For much more in-depth information about the ternary operator, see this useful tutorial at CodeAcademy.
In plain English, it says "if the checkbox that you passed is checked, set the CSS display attribute to "" (visible). If it is not checked, set the CSS display attribute to "none" (invisible)."
jQuery Solution
Now let's take a look at these same two examples and a way to accomplish the same thing using the jQuery JavaScript library.
Example 1 - Prompts
Example 1 - Prompts
Vital Signs
Example 2 - Sub orders
| Main Order |
The JavaScript / jQuery Code
$('#chkVitalSigns').click(function() {
$('#spanVitalSignsPrompts').toggle($(this).attr('checked') !== undefined);
});
$('#chkMainOrder').click(function() {
$('#rowSubOrders').toggle($(this).attr('checked') !== undefined);
});
You can see that this solution isn't all that different from the native JavaScript solution; it just separates the onClick code to the header. Personally, I find that this helps keep the structure and the functionality separate and easier to maintain, but I know that's not a universally held preference.
The jQuery code, via the $.click() function, essentially adds the onClick attribute to the checkboxes. When the checkbox is clicked, it calls the jQuery $.toggle() function. If this function is called without a parameter, it just toggles the visibility of the object (if it was visible, it will be hidden and vice versa). If you pass it a true/false parameter like I am doing here, it will show the element when the parameter is true and hide the element when the parameter is false.
Just like above, you can use the this JavaScript element to refer to the item in context. If you want to treat it like a jQuery object, you can just reference it as $(this).
Scott Morris is available for training, mentoring, troubleshooting, and iForms consulting. Find out more at www.thinkiforms.com
0 comments: