How to Create Smart Quantity Limits in Formidable Forms with JavaScript

Formidable Forms, Websites

Automatically control multiple quantity fields based on a master total field

Sometimes you need to create forms where users can distribute a limited quantity across multiple options, but the total can’t exceed a certain limit. Think restaurant reservations (distribute guests across menu types), event planning (allocate seats by category), or budget allocation (distribute funds across departments).

This tutorial shows you how to build this logic in Formidable Forms using a simple JavaScript solution.

The Problem

You have:

One “master” field that sets the total available quantity (e.g., number of people)
Multiple “allocation” fields where users distribute this quantity (e.g., menu choices)
Need to ensure the sum of allocations never exceeds the master total

The Solution Overview

We’ll create a JavaScript function that:

Updates allocation field options when the master field changes
Validates the total in real-time
Shows helpful error messages when limits are exceeded

Step-by-Step Implementation

Step 1: Set Up Your Form Fields

Create these fields in your Formidable Form:

Master Field (Dropdown): “Total Available” – options from 1 to your maximum
Allocation Field 1 (Dropdown): “Category A Quantity” – initially empty
Allocation Field 2 (Dropdown): “Category B Quantity” – initially empty

Note down each field’s ID number (visible in the form builder).

Step 2: Add the JavaScript Code

Go to Forms → [Your Form] → Settings → Customize HTML and scroll to the “After Fields” section.

Paste this code, replacing the field IDs with your actual field IDs:

				
					<script type="text/javascript">
jQuery(document).ready(function($){
    // When master field changes
    $('select[name="item_meta[MASTER_FIELD_ID]"]').change(function(){
        var totalAvailable = parseInt($(this).val()) || 0;
        
        // Update both allocation fields
        updateAllocationField('select[name="item_meta[FIELD1_ID]"]', totalAvailable);
        updateAllocationField('select[name="item_meta[FIELD2_ID]"]', totalAvailable);
        
        // Validate total
        validateTotal(totalAvailable);
    });
    
    // When allocation fields change, validate total
    $('select[name="item_meta[FIELD1_ID]"], select[name="item_meta[FIELD2_ID]"]').change(function(){
        var totalAvailable = parseInt($('select[name="item_meta[MASTER_FIELD_ID]"]').val()) || 0;
        validateTotal(totalAvailable);
    });
    
    function updateAllocationField(selector, maxValue) {
        var field = $(selector);
        if (field.length > 0) {
            var currentVal = field.val();
            field.empty();
            field.append('<option value="0">0</option>');
            
            for (var i = 1; i <= maxValue; i++) {
                field.append('<option value="' + i + '">' + i + '</option>');
            }
            
            if (currentVal && currentVal <= maxValue) {
                field.val(currentVal);
            } else {
                field.val('0');
            }
        }
    }
    
    function validateTotal(maxAllowed) {
        var field1 = parseInt($('select[name="item_meta[FIELD1_ID]"]').val()) || 0;
        var field2 = parseInt($('select[name="item_meta[FIELD2_ID]"]').val()) || 0;
        var total = field1 + field2;
        
        $('.allocation-error').remove();
        
        if (total > maxAllowed && maxAllowed > 0) {
            var errorMsg = '<div class="allocation-error" style="color: red; font-size: 12px; margin-top: 5px;">Total: ' + total + '/' + maxAllowed + '. Please reduce quantities.</div>';
            $('select[name="item_meta[FIELD2_ID]"]').after(errorMsg);
        }
    }
});
</script>

Step 3: Replace the Field IDs

In the code above, replace:

MASTER_FIELD_ID with your master field’s ID
FIELD1_ID with your first allocation field’s ID
FIELD2_ID with your second allocation field’s ID

For example, if your field IDs are 45, 72, and 74:

Replace MASTER_FIELD_ID with 45
Replace FIELD1_ID with 72
Replace FIELD2_ID with 74

Step 4: Test Your Form

Save your form settings
View your form on the frontend
Select a number in your master field
Check that allocation fields update with appropriate options
Try selecting quantities that exceed the total – you should see an error message

Real-World Examples

Restaurant Reservations

Master: “Number of Guests” (1-10)
Allocations: “6-Course Menu”, “8-Course Menu”
Logic: Total menu selections can’t exceed guest count

Event Planning

Master: “Available Seats” (1-100)
Allocations: “VIP Seats”, “Standard Seats”, “Student Seats”
Logic: Total seat allocation can’t exceed venue capacity

Budget Distribution

Master: “Total Budget” ($1000-$10000)
Allocations: “Marketing”, “Operations”, “Development”
Logic: Total departmental budgets can’t exceed available funds

Extending to More Fields

To add more allocation fields, simply:

Add the new field selector to the change event listener
Add another updateAllocationField() call
Include the new field in the validateTotal() function

Troubleshooting

Fields not updating? Check that your field IDs are correct in the JavaScript code.

Script not running? Make sure you’ve added the code to the “After Fields” section in Customize HTML, not “Before Fields”.

Options not appearing? Verify that your allocation fields are set as dropdown fields, not text inputs.

Conclusion

This conditional allocation logic transforms static forms into intelligent interfaces that guide users toward valid selections while preventing errors. The approach works with any Formidable form where you need to distribute limited quantities across multiple categories.

The technique leverages Formidable’s built-in JavaScript support and requires no additional plugins, making it a lightweight solution for complex allocation scenarios.