| Section | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Add CorrectCase to the CSS Class property of the control to enable this JavaScript.
Limit selection of checkbox options
The JavaScript below will limit the choices to a maximum of three for a checkbox control in a form. Add limit3 to the CSS Class property of that control to enable this JavaScript.
| Code Block |
|---|
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'limit3')) {
FEvent.observe(el, 'click', this.checkboxlimit.bindAsObserver(this, el));
}
},
checkboxlimit: function (evt, el) {
var checkgroup = el.childrenWithClassName('input');
var limit = 3;
for (var i = 0; i < checkgroup.length; i++) {
checkgroup[i].onclick = function () {
var checkedcount = 0
for (var i = 0; i < checkgroup.length; i++)
checkedcount += (checkgroup[i].checked) ? 1 : 0
if (checkedcount > limit) {
this.checked = false
for (var i = 0; i < checkgroup.length; i++)
(checkgroup[i].checked) ? checkgroup[i].disabled = false : checkgroup[i].disabled = true;
} else {
for (var i = 0; i < checkgroup.length; i++)
checkgroup[i].disabled = false;
}
}
}
}
} |
.
Scroll to Top
A Tab control with many fields in each tab, may require a long scroll to switch from one tab to another. You can use a trigger control at the bottom of the first tab with a business rule to navigate the user to the second tab when the trigger is clicked. For example, when you click on the Next Tab trigger control on the Personal Information tab in the Application for Employment form shown a business rule will navigate the user to the Employment History tab.
...
| Code Block |
|---|
var CustomEventHandlers = {
uploadEl: null,
setup: function (el) {
if (CustomView.hasClass(el, 'onlyPDF')) {
this.uploadEl = el;
}
window.setTimeout('CustomEventHandlers.checkFile()', 3000); // set the initial timer
},
checkFile: function () {
for (var i = 0; i < this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name').length; i++) {
if (!(/^.*\.(pdf|PDF)$/.test(this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title')))) {
alert("Invalid file '" + this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title') + "' will be removed.");
this.uploadEl.parentNode.childrenWithClassName('f-upload-file-list-delete')[i].click();
}
}
window.setTimeout('CustomEventHandlers.checkFile()', 3000);
}
} |
Automatically submit a form
...
| Tip |
|---|
Users expect the submit and cancel buttons to be located at the bottom of a form. Moving the location of the Submit control is not recommended. |
...
Submit on Enter Key Press
...
This custom JavaScript automatically inserts dashes as the user enters a phone number into a Phone control. Characters other than the dash entered into the control are deleted. Add PhoneInsert to the CSS Class property of the Phone control to enable this JavaScript.
| Code Block | ||
|---|---|---|
| ||
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'PhoneInsert')) {
FEvent.observe(el, 'keydown', this.formatPHONE.bindAsObserver(this, el));
FEvent.observe(el, 'keyup', this.formatPHONE.bindAsObserver(this, el));
}
},
}, formatPHONE: function (event, element) {
if (event.keyCode != 46 && event.keyCode != 8) {
fldVal = $(element).value;
var nom = fldVal.charAt(fldVal.length - 1);
if (isNaN(nom) && nom != "-") {
$(element).value = fldVal.substring(0, fldVal.length - 1);
} else {
if ((fldVal.length == 3) || (fldVal.length == 7)) {
$(element).value = fldVal + "-";
}
if (fldVal.length > 12) {
$(element).value = fldVal.substring(0, fldVal.length - 1);
}
}
}
}
} |