About Calculation Form - Create a Calculation Button in my form

  • riskosoft
    Asked on October 1, 2014 at 5:05 AM

    Hello, I have a question about the calculation form.

    Do you think it is possible to make a calculation form and start the automatic calculation By press a button which i can call "Calculate Button" or something like That ?

    For example : I make a simple calculation form just for addition, but i dont want the automatical résult just after enter the data. I want to put a button, where i can press to start automatic calculation.

    If it is possible, HOW i can dO that ?

     

  • Welvin Support Team Lead
    Replied on October 1, 2014 at 8:47 AM

    Hi,

    Something like this: http://www.jotformpro.com/form/42733497601962. As you could see, it's possible. But this is a customized form to match your needs since we do not have a direct feature that you can just enable in the form settings.

    The following are the methods to accomplish this one:

    1. Add a checkbox field with only one single option. In my example, I put "YES":

    About Calculation Form   Create a Calculation Button in my form Image 1 Screenshot 30

     

    2. I have added the conditional logic to sum both Number One and Two fields in the "Total" field when "Yes" is selected in the Calculation Button field:

    About Calculation Form   Create a Calculation Button in my form Image 2 Screenshot 41

    We have explained this method to this guide: https://www.jotform.com/help/268-How-to-Insert-Text-or-Mathematical-Caculation-into-a-field-using-a-Condition

    3. I have added the following custom CSS codes to the form to make the "Yes" option to looks like a button:

    #cid_4 label {

    width: 154px;

    height: 54px !important;

    font-size: 16px;

    cursor: pointer;

    background-color: #000;

    color: white;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 15px;

    padding-top: 15px;

    }

    input#input_4_0:checked + label {

    background-color: #0D39AA;

    }

    input#input_4_0 {

    display: none;

    }

     

    Guide on how to inject a custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Let us know if you have any further questions.

    Thank you!