What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

    How can I create a product list dropdown that will display the cost of an item and calculate the total * Qty and is dynamic

    Asked by Sholinkadmin on September 16, 2015 at 08:43 AM

    How can I create a product list (dropdown) that will display the cost of an item when a product is selected and calculates the cost * Qty and that will also allow the filler of the form to dynamically add multiple product lines?

    I'm trying to create a form that my staff can use to fill out fields that will help us to easily make an invoice, but it doesn't seem like I'm able to do what we need.

    It almost seems like I would need a configurable list that can either do calculations, or another field can do calculations based on what's entered in the Configurable list, which I know isn't possible.  But is there a work around that you can think of?

    I was able to accomplish this on another service, but I would rather do this in Jotform if possible.  To give you can idea of what I'm looking for, here is a link, scroll down to product, select a product and enter in a Qty and you will see that it will automatically calculate the product price * Qty and then it gives me an option to add another line item:





    Page URL:

  • Profile Image
    JotForm Support

    Answered by Charlie on September 16, 2015 at 01:35 PM

    I checked the link you shared, unfortunately, we do not have a widget or a feature that have that function.

    You can also share your widget idea to our widget team, you can navigate to this page: http://widgets.jotform.com/. Click the "Request a widget" button at the right


    The current widget that allows dynamic computation would be the Spreadsheet widget.

    Or, you can also use conditions to show pre-set fields and calculate them using form calculation, here's a sample form: http://form.jotformpro.com/form/52584629462969?. I have set 3 product section. Each product has a quantity field and a list of items.

    Here's how I did it:

    A. First, here's how I setup one section of my product:

    Here are the parts of my product 1 section:

    1. Form collapse (Product 1)- I used the form collapse field to hide/show multiple fields at the same time, here's a guide on how to do it: http://www.jotform.com/help/297-Show-or-Hide-multiple-fields-at-once-using-form-collapse-tool 

    2. Drop down field (Item) - the list of items that the user can select, you can assign calculation values on them, here's a guide on how to do that: http://www.jotform.com/help/301-How-to-Assign-Calculation-Value 

    3 Number field (Quantity) - the quantity of the item chosen

    4. Form Calculation widget (Product 1 Total) - Quantity * value of the item chosen. It uses the Form Calculation widget, here's a guide on how to do that: http://www.jotform.com/help/259-How-to-perform-calculation-in-the-form 

    5. Check box field (Add Item) - If this is selected, show "Product 2" section.


    B. Now repeat and create the same sections. We want to show/hide each section when "Add Item" is selected, here's how I setup mine:

    1. Select "Conditions", choose "Show/Hide a form field"

     2. Here you'll see how the fields are shown only when the "Add Item" check box is selected.


    C. At the end of the form, I'll add a form calculation widget with the total of all the products.


    Now, regardless if Product 2 and Product 3 is filled out, the answer will still be correct because their values will be "0". To further check how I setup my form, you can clone it by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    I hope that helps.