keyboard_arrow_left Back to Knowledge Base

Linking calculator results to an external input field

Sometimes you might need to send your calculator results to other input fields outside the calculator, or update some figures on the text of your website. Using the Advance Settings feature, Calculators created with Calconic can export results to other input fields or update some of the website’s text. It’s an advanced feature; therefore, it requires some basic JavaScript and HTML understanding.

Follow the instructions below to set your calculator up to send its results to external input fields of the same page it is embedded to:

  1. Login to your Calconic account.
  2. Click My Calculators and select the calculator you are building.
  3. Click the Gear icon on the left side.
  4. Click Advanced Settings.
  5. Click the Load Example button.
  6. Select External Output Example.
  7. Modify the code snippet according to your needs.
  8. Click Save.
  9. Embed the calculator to your website (Standard or Lightbox mode only). Make sure that the embedded calculator is on the same page as the input field.

Attributes of the code snippet

SELECTOR - is the JavaScript selector that will select a specific part of the website the value will interact with. Let’s say you have a webpage consisting of two elements - your Calconic calculator and one numeric input field named change. Find the example of HTML snippet of this input field:

<input type="number" name="change" />

In this case, your SELECTOR attribute should look like the following:

"selector": "input[name='change']"

Accordingly, you can change some specific text of your website. It has to be surrounded by <div> or <p> tags and named. For example:

<div name="changeit">text that will be changed</div>

Then your SELECTOR attribute would look like the following:

"selector": "div[name='changeit']"

REF - the reference to the calculator's element you are trying to take the value from.

METHOD - We provide 3 different methods to embed the calculator value:

  1. attribute - Will set the value into a specified HTML attribute of the selector
  2. append - Will append the value into the selected element without removing the content inside the selected HTML element
  3. innerHTML - Will replace the contents of the selected HTML element completely with the value

ATTRIBUTENAME - in case you have specified the embed method as ‘attribute’, use this field to specify which attribute of the HTML element would you like to have the value embedded to. This field will be ignored if any method other than Attribute is used within the settings.

 

Each time the specified element value is changed, its value will be sent to the specified selector using the method you specified.

This can be used to change the value of any input or text on your website.

Build calculator for free!