I created a form collecting the form user's name, address, city, state, zip, etc. Then I have a check box that I would like the form user to check if the billing information is the same as the user information. Once this checkbox is selected, the billing section will hide. I am a JavaScript novice and reviewed the current help information regarding dynamic forms and JavaScript but I am not having any luck. Maybe I am going about this in the wrong order. Either way, I would appreciate someone steering me in the right direction to get a solution to hide the billing information.
For this, you need to put all fields and controls inside Grid container.
And assign a CSS class to it, e.g. billing-info.
And you need to add this code in JavaScript editor. Please don't forget to replace Checkbox with the internal name of the field.
fd.spRendered(function() {
function hideBilling() {
if(fd.field('Checkbox').value.length == 0) {
$('.billing-info').show();
}
else {
$('.billing-info').hide();
}
}
// Calling hideBilling when the user changes the field
fd.field('Checkbox').$on('change', hideBilling);
// Calling hideBilling on form loading
hideBilling();
});
Well, I thought I had it and then tested but the billing information grid is still not hiding when the checkbox is selected. Here is my code and some screenshots. Also here is the link to the form. What in the world am I missing?
fd.spRendered(function() {
function hideBilling() {
if(fd.field('cbxBillingInfo').value.length == 0) {
$('.billing-info').show();
}
else {
$('.billing-info').hide();
}
}
// Calling hideBilling when the user changes the field
fd.field('cbxBillingInfo').$on('change', hideBilling);
// Calling hideBilling on form loading
hideBilling();
I'm sorry, I thought you are using Forms for SharePoint.
For Public forms please use rendered() event in the code. Please see updated code below.
fd.rendered(function() {
function hideBilling() {
if(fd.field('cbxBillingInfo').value.length == 0) {
$('.billing-info').show();
}
else {
$('.billing-info').hide();
}
}
// Calling hideBilling when the user changes the field
fd.field('cbxBillingInfo').$on('change', hideBilling);
// Calling hideBilling on form loading
hideBilling();
});
Ah...thanks for educating me that there is a difference in the functions used for Public and SharePoint forms. Next time, I will make sure I communicate which Forms application I am using.
I would like to open this topic again. I would like to make a single ComboBox "ReadOnly" or "Disabled" and I modified the code like this, but it doesn't work. Can someone help me?
fd.spRendered(function() {
function hideParent() {
if(fd.field('IsChilditem').value == true)
{
fd.field('ParentItem').disabled = false;
}
else
{
fd.field('ParentItem').disabled = true;
}
}
// Calling hideBilling when the user changes the field
fd.field('IsChilditem').$on('change', hideParent);
// Calling hideBilling on form loading
hideParent();
});
You are using Forms Designer for classic UI, you don't need fd.rendered() event and you must use the different code to get field value and show/hide fields. Please find code sample in Forms Designer documentation.
Just for the future, questions regarding Forms Designer are better answered in the official Forms Designer forum here - Forms Designer Forum - Index page
