How can I add spinner fields to my check lists?

  • tnorth
    Asked on July 17, 2015 at 5:42 AM

    It seems like it should be straightforward... I need to add spinner fields to check lists and then multiply the 'calculation value' of the checked box by a selected spinner field value - any clues?

    Thank you!

  • Charlie
    Replied on July 17, 2015 at 10:41 AM

    Hi,

    You can do that by first assigning a calculation value on your check box list, you can follow this guide: http://www.jotform.com/help/301-How-to-Assign-Calculation-Value.

    After that, you can follow this guide on how to perform a calculation using the form calculation widget: http://www.jotform.com/help/259-How-to-perform-calculation-in-the-form.

    Here's an example form that I made: http://form.jotformpro.com/form/51974408701962.

    1. Here I add a spinner field just beside of each check box option.

    How can I add spinner fields to my check lists? Image 1 Screenshot 50

    2. In your check box option, we will assign a calculation value on it.

    How can I add spinner fields to my check lists? Image 2 Screenshot 61

    3. We will then use the form calculation widget to calculate the total.

    How can I add spinner fields to my check lists? Image 3 Screenshot 72

     

    4. Here I multiplied each spinner to their aligned check box. And then add them all together.

    How can I add spinner fields to my check lists? Image 4 Screenshot 83

     

    I hope that helps. Do let us know if that works.

  • tnorth
    Replied on July 20, 2015 at 5:10 AM

    Hi there,

    Thank you. I am aware of how to use the calculation tool however how do i get the spinner field side-by-side with the checkbox?? and if i have already painstakingly setup the form with checkboxes how can i add spinners without removing those checkboxes? Please help!! Thank you.

  • Jan
    Replied on July 20, 2015 at 8:41 AM

    Can you please share the form URL or form ID you're working with?

    As I understand, you want the spinner and check box on the same row, right?

    How can I add spinner fields to my check lists? Image 1 Screenshot 30

    You just need to right click on the spinner field and on the check box field and then select "Shrink". The field will automatically shrink and move up to the previous line.

    How can I add spinner fields to my check lists? Image 2 Screenshot 41

    Helpful guide:

    http://www.jotform.com/help/90-Form-Field-Positioning
    http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

     

  • tnorth
    Replied on July 20, 2015 at 9:28 AM

    Yes sure, form ID: http://www.jotform.com//?formID=51934424452353#

  • tnorth
    Replied on July 20, 2015 at 9:29 AM

    Ideally, each of the products needs a spinner field to select quantities next to it - how can I do this, and furthermore multiply the cost of the products by the individual spinner fields - I understand how the calculator and calculation works, but I need to be able to have a spinner next to EACH checkbox in EACH checkbox list. If this makes sense? 

  • Charlie
    Replied on July 20, 2015 at 11:02 AM

    Hi,

    If you need to add specific spinners to each check box item, unfortunately, I believe you can only do that if you separate the check boxes as one item, as I've shown in my sample form above. Considering that you want to multiply EACH checkbox value on EACH spinner that they have.

    The problem is that the check box field handles it's value as "one", meaning the values on each check box item is being added as a total, so we won't be able to multiply each item on the spinner. Unless we'll use the conditional logic, but it is more pain staking I believe, and there's also issues on how we will position the spinners in that setup. 

    I hope that helps.

  • Charlie
    Replied on July 20, 2015 at 11:14 AM

    Here's an example of what I meant: http://form.jotformpro.com/form/52004851690956.

    Instead of using the value of each check box, we will use the conditional logic to calculate.

    Basically, we will have a spinner field for each check box and a form calculation to output the value.

    How can I add spinner fields to my check lists? Image 1 Screenshot 30

    Here's the conditional logic that I made:

    How can I add spinner fields to my check lists? Image 2 Screenshot 41

     

    The problem on this setup is that we cannot properly position the spinners on the side of the check box items, unless we will use custom CSS code which will still be a lot of work also.

    Let us know which one will work for you best and we will try our best to help.

  • tnorth
    Replied on July 20, 2015 at 11:29 AM

    I believe the custom CSS code will be the most useful here - we are willing to spend the time and resources making sure this portal is seamless and looks as professional as possible. All the current fields have got calculation values and conditional logic in place and everything is ready to go, except the quantities chosen.

    If it is possible to customise the form so each product has its own spinner and quantity which multiplies then that is the ideal - I had already thought about doing individual spinners that pop up depending on price selection but this is not particularly user-friendly (in my opinion).

    Should you have the time to demonstrate a custom CSS that would be ideal (i think). 

    If the ideal here is not available then I believe I will end up reevaluating the layout of the current form, however as you can see the form is very developed and this would be a difficult task to preserve the conditions etc. 

  • Charlie
    Replied on July 20, 2015 at 1:21 PM

    Here's a sample using the test form that I made earlier: http://form.jotformpro.com/form/52004851690956?

    Using custom CSS code, we have re-positioned the spinners just beside the check box item. If this is the workaround that you'll be using, you'll need to do that following:

    1. Use conditional logic to assign value and calculate. You can refer to the my post prior to this one.

    2. We will have a spinner field (Quantity) and a form calculation widget (Check box item multiplied by Quantity for its total). Note: The calculation does not happen inside the widget, it happens on the conditional logic and we just used the widget as an output.

    3. You'll need to use custom CSS code to reposition the spinner fields beside the check box items.

     

    I hope this helps. If you need more assistance on this, you can try applying this method to your form and if you need help you can contact us anytime.

  • tnorth
    Replied on July 21, 2015 at 6:18 AM

    The sample form looks perfect.. could you give me the custom CSS code to perform the repositioning - do I need to make the spinner fields for each item individually first? And does each item require a whole new spinner field area? 

    Thanks again. 

  • Charlie
    Replied on July 21, 2015 at 9:45 AM

    Hi again,

    In my sample form, I needed to add individual spinner for each check box, I'm not sure how yours work, but if you need to multiply each check box value on each spinner, then you'll need to make separate ones.

    The custom CSS code will depend on the fields you have in your form, I would suggest that you create a section of your form that you need the spinners, then we'll help you on the CSS code.

    Here's the custom CSS code that I used:

    /**Labels for the spinner**/

    #label_3, #label_4, #label_5 {

        visibility : hidden !important;

        width : 1px !important;

        padding : 0px !important;

    }

     

    /**Position the spinners**/

    #id_3, #id_4, #id_5 {

        position : relative !important;

        bottom : 70px !important;

        left : 100px;

        width : 1px !important;

    }

     

    /**Position the check box**/

    #id_1 {

        position : relative !important;

        top : 150px !important;

    }

     

    /**Add margin at the bottom of each check box item**/

    #cid_1 > div > span {

        margin-bottom : 40px !important;

    }

    You can clone my form and inspect my CSS code there on how it works.

    How can I add spinner fields to my check lists? Image 1 Screenshot 20

     

    If you have a lot of spinners and check boxes, I would suggest checking this link to be familiar with CSS.

    http://www.w3schools.com/css/ 

    http://www.jotform.com/form-designer/tuts/episode4/ 

    http://www.jotform.com/form-designer/tuts/episode5/ 

     

    Changing the overall look of the form using the CSS and repositioning the fields extensively might need a lot of work and some technicalities. But there's always room to learn something new.

  • tnorth
    Replied on July 21, 2015 at 10:00 AM

    I see I understand - that code looks like a Python terminal too which I am very familiar with. I have the section on my form which is a list of all the products (page 3). I have completed the Spinner section for a rentals section of the form, and this is what I would like to do for the individual products that are above : please take a moment to inspect my form thus far http://www.jotform.com//?formID=51934424452353 and you will see what I mean/require for the above section, so we are on the same page. 

  • Charlie
    Replied on July 21, 2015 at 11:13 AM

    I see the rental choices section in your form, I also see that there are some that were not aligned, you can move down the field in a new line by following this screenshot:

    How can I add spinner fields to my check lists? Image 1 Screenshot 20

     

    May I know how you wish to proceed on the calculation on this section? I believe you can easily proceed on calculating your form here. If you wish any assistance, do let us know. 

    If it's a different topic and somewhat unrelated to the original thread here, you can always open a new post so that we can focus on it better. :)

  • tnorth
    Replied on July 21, 2015 at 12:34 PM
  • Charlie
    Replied on July 21, 2015 at 1:37 PM

    Thank you for understanding. We will address that thread accordingly.