• Simple Embedding
• JSFiddle
• Hosted Forms
• Submission Hosting
• Submission View
• Submission Custom Endpoint
• Thank You Page
• External Data Load
• PDF Form
• Custom Components
• Conditional Wizards
• Custom Form Builder
• Custom Wizards
• Wizards
• WYSIWYG Editor
• JavaScript Embedding
• Field Logic
• JSON Powered Forms
• Save as Draft
• Conditional Forms
• Select Dropdowns
• Data Grid Input
• Edit Grid
• No Eval
• Data Grid Panels
• External Sources & Conditional Selects
• Calculated Values
• Multi-Language Forms
• Kitchen Sink
• reCAPTCHA component

Calculated Values

You can use JSON Logic to create complex calculated values based on the values of other fields.

Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'number',
      label: 'A',
      key: 'a',
      input: true,
      inputType: 'text',
      multiple: true,
      prefix: '+',
      validate: {
        min: 2,
        max: 100,
        step: 1
      }
    },
    {
      type: 'htmlelement',
      tag: 'p',
      className: 'text-center',
      content: '———— X ————'
    },
    {
      type: 'number',
      label: 'B',
      key: 'b',
      input: true,
      inputType: 'text',
      multiple: true,
      prefix: '+',
      validate: {
        min: 2,
        max: 100,
        step: 1
      }
    },
    {
      type: 'textfield',
      label: 'Total',
      key: 'total',
      input: true,
      inputType: 'text',
      disabled: true,
      calculateValue: {
        "*": [
          {"_sum": {var: 'data.a'}},
          {"_sum": {var: 'data.b'}}
        ]
      }
    }
  ]
});