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

  • Profile Image
    Sholinkadmin
    Asked 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:

    https://www.cognitoforms.com/ShoLinkInc/Invoice

    Thanks,

    Tony

     

  • Profile Image
    Charlie
    Answered 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.