A friendly note about JavaScript in reBB: JavaScript can make your forms much more powerful and user-friendly! While we've built reBB to be safe and secure, JavaScript is inherently powerful—that's what makes it so useful. We encourage you to experiment and create amazing forms, but please use these capabilities responsibly. Avoid collecting sensitive information without consent, and remember that all code runs in the user's browser. While we have implemented some security measures for javascript, we can't cover every possible exploit. Keep in mind that abuse will result in you being banned/blocked from using reBB. Think of it as being a good neighbor in our form-building community. If you have questions or need guidance, don't hesitate to reach out! You can read more regarding security here.
JavaScript can significantly enhance your reBB forms by adding custom functionality, dynamic interactions, and advanced data handling. This guide explains how to integrate JavaScript into form components safely and effectively.
JavaScript enables you to:
Form.io (which powers reBB) provides several places to add JavaScript directly within component settings:
The "Custom Default Value" field lets you set dynamic initial values for components:
// Set a default value based on today's date
value = new Date().toISOString().split('T')[0];
// Get a value from a cookie
value = getCookie(component.key);
// Generate a random ID
value = "ID-" + Math.floor(Math.random() * 10000);Use "Custom Validation" to create rules that determine if input is valid:
// Require value to be a valid email
valid = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(input);
// Validate input against a list of allowed values
valid = ['option1', 'option2', 'option3'].includes(input);
// Ensure value is at least 5 characters
valid = input.length >= 5;"Calculated Value" lets you derive a component's value from others:
// Calculate total from quantity and price
value = data.quantity * data.price;
// Concatenate first and last name
value = data.firstName + ' ' + data.lastName;
// Calculate age from date of birth
var birthDate = new Date(data.birthDate);
var today = new Date();
value = today.getFullYear() - birthDate.getFullYear();"Custom Conditional" determines when a component should be displayed:
// Show field only when checkbox is selected
show = data.agreeToTerms === true;
// Show field when dropdown has specific value
show = data.userType === 'admin';
// Show field based on multiple conditions
show = data.age >= 18 && data.country === 'US';Datagrids require special consideration when using JavaScript. Here's how to interact with them effectively using component settings.
You can perform calculations on datagrid rows using the "Calculated Value" property:
// Inside a "total" field in a datagrid row
// Calculate product of quantity and price in the same row
value = row.quantity * row.price;
// Calculate a running total from all datagrid rows
var total = 0;
data.orderItems.forEach(function(item) {
total += (item.quantity * item.price);
});
value = total;Within a component inside a datagrid, you can access the current row and other rows:
// Current row in a datagrid (inside Calculated Value or Custom Validation)
value = row.fieldName;
// Access the current row index
var currentIndex = rowIndex;
// Access a specific row in the same datagrid
var specificRow = data.myDatagrid[2]; // Gets the third row (index 2)You can implement custom validation for fields within datagrids:
// Ensure quantity doesn't exceed available stock
valid = input <= row.availableStock;
// Validate that end date comes after start date
valid = new Date(row.endDate) > new Date(row.startDate);
// Check for duplicate entries within the datagrid
var isDuplicate = false;
data.contacts.forEach(function(contact, idx) {
if (idx !== rowIndex && contact.email === input) {
isDuplicate = true;
}
});
valid = !isDuplicate;This example shows how to set up calculated values within an "orders" datagrid:
For a "subtotal" field within the datagrid, use this Calculated Value:
// Calculate subtotal for this row
value = row.quantity * row.price;For a "grandTotal" field outside the datagrid, use this Calculated Value:
// Sum all subtotals from the orders datagrid
var total = 0;
if (data.orders && Array.isArray(data.orders)) {
// Skip the first row (which is hidden in reBB datagrids)
for (var i = 1; i < data.orders.length; i++) {
total += Number(data.orders[i].subtotal || 0);
}
}
value = total;ReBB provides built-in cookie functions that you can use in your form components. These are especially useful for saving user input and restoring it later.
Use the setCookie function in "Custom Conditional" to save field values:
// Save the current field value to a cookie (persists for 30 days)
setCookie(component.key, value, 30);
// You can use different cookie names than the component key
setCookie('userProfile', value, 30);
// Save a modified or formatted value
setCookie(component.key, value.toUpperCase(), 30);Use the getCookie function in "Custom Default Value" to retrieve saved values:
// Set default value from cookie with same name as component key
value = getCookie(component.key);
// Check if cookie exists before using it
value = getCookie(component.key) || 'Default if no cookie';
// Parse and process cookie value
var savedValue = getCookie('numericalValue');
value = savedValue ? parseFloat(savedValue) * 1.1 : 0;This example shows how to create fields that remember user information:
For a "username" field:
// Custom Default Value
value = getCookie(component.key);
// Custom Conditional (to save when changed)
setCookie(component.key, value, 30);You can set up all your common user fields (name, email, ID, etc.) this way to create "memory" in your forms.