javascriptformstack

Is it possible to create custom calculations with formstack using javascript?


I have a form in formstack that I need to add some calculations that go beyond the capabilities of their calculation builder. I need to use a switch statement to determine which range the number is in and then perform a different calculation based on the range. Then I want to populate another field on the form with the answer in real time. Is it possible to do any of the following?

Add custom javascript to formstack to create the advanced calculations?

Have the formstack form communicate with javascript on the page that I'm embedding the form on.

Use the formstack api/webhook to do the calculations. I don't think this is an option since the webhook only works on submission and not on any other events.


Solution

  • Edit

    Using the change event has the drawback that the user needs to select another field in order for the event to fire, so it is not truly real-time. For a solution that updates your view on every input, bind your event listener to the keyup event instead.

    Original answer

    Yes, you can manipulate the forms embedded in your pages just like regular HTML forms. To achieve what you describe, you could listen to the change event on your target fields to read their updated value and do your calculations/field populations. Something along the lines of

    document.getElementById('#yourFieldIdHere').addEventListener('change', function(e) {
        var field = e.target,
            value = field.value,
            result;
    
        switch (value) {
            case 'foo':
            ...
            //Do whatever you like here
        }
    
        result = 'whatever your calculations return';
    
        document.getElementById('#otherFieldId').value = result;
    })
    

    n.b.:The above is just pseudocode to give you an idea of my proposed solution