Checkbox, Radio button, and Select

Checkbox, Radio button, and Select2017-05-17T19:56:52+00:00

Latest update of Calx is now support wider form element including checkbox, radio button and select-box, as previous version only support textbox. By default Calx will assume that unchecked radio button or unchecked checkbox have a 0 value untill you define the data-unchecked value

SUM Scenario with checkbox and radio button

If you have group of checkbox, and you need to calculate all it’s value, we can simply use SUM, and include all checkbox in the group. Since unchecked checkbox will be treated as 0, then x + 0 + 0 + 0 = x

this scenario also apply to group of radio button, say we have 5 radio buttons with one of them is checked, so we can assume that 0 + 0 + x + 0 + 0 = x, where x is the value of checked radio button

but in some case where SUM scenario can’t be applied, and you need to have unchecked item to be treated as other than 0, this scenario can be achieved by adding data-uchecked attribute

above code will tells Calx to treat unchecked radio button as 1 instead of 0.

Working with select-box

Working with select box is much easier, as you only need to provide id attribute for the select element

but unfortunately, multiple select is not supported yet by Calx, maybe next release ;)[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

20 Comments

  1. lutfi October 13, 2015 at 6:47 pm - Reply

    ijin copas buat projek. thx

    • ikhsan October 13, 2015 at 6:56 pm - Reply

      Monggo mas πŸ˜€

      gak pake yang v 2 aja? πŸ˜€

  2. Urip May 26, 2015 at 6:18 pm - Reply

    Mas bagaimana cara menggunakan input type number? suwun

  3. Pascal January 23, 2015 at 2:48 am - Reply

    Is it possible to read a data-attribute instead of the value?

    • ikhsan January 23, 2015 at 5:44 am - Reply

      Which data attribute do you mean?

      You can easily get any data attribute using jquery

      For calx cell, you can do it using the getFormula and getFormat method

      Regards,
      Ikhsan

      • Pascal January 24, 2015 at 1:33 am - Reply

        Hi Ikhsan,

        I thought i did fixed my problem down below but unfortunately I still don’t get my form to work.

        On post I want so savhttp://www.xsanisty.com/project/calx/checkbox-radio-button-and-select/#crayon-te-contente item1 data-id1 and item2 data-id2 in a database using php. I first was trying to realize this by adding a hidden field and display the id down below, but the previous value get overwritten if I select the second line. (see )

        Maybe it’s better to add data-price to the option and use value to save the ID? What is best and how do I get there?

        Thanks a lot!

        • Pascal January 24, 2015 at 1:37 am - Reply

          Hi Ikhsan,
          Sorry something went wrong on posting.

          On post I want so save item1 data-id1 and item2 data-id2 in a database using php. I first was trying to realize this by adding a hidden field and display the id down below, but the previous value get overwritten if I select the second line. (see )

          Maybe it’s better to add data-price to the option and use value to save the ID? What is best and how do I get there?
          Thanks a lot!

  4. Pascal January 18, 2015 at 8:26 pm - Reply

    Hi, I’m looking for a way to add 2 values to a option. I’m selecting a list of product with a price from my database and translating them into a list. When selecting a product in the list the price needs to be placed in the input field next to it. Doing this only is easy. But I want so save form by inputting this into the database using php. So for the product I want place the ID value in a database. How can I best do this?
    Thanks for your help!

    • Pascal January 20, 2015 at 3:19 am - Reply

      Fixed:

      Added data-id attribute to the options and placed them into a hidden input field.

  5. Zod August 27, 2014 at 12:42 pm - Reply

    I’m still unsure are reading through these pages, how to display the result of my calculation in a read-only box

    • ikhsan August 27, 2014 at 4:18 pm - Reply

      Hi Zod,

      every element with data-formula attribute, will display the calculation result based on value of data-formula

      regards
      Ikhsan

  6. mike August 22, 2014 at 12:45 am - Reply

    Hi, is there a way to add multiple values to a single radio button? I need something where a radio button would have a value=”200, 33″ where the 200 would be something like total cost and the 33 would be something like annual cost. If the radio button is clicked the total cost and annual cost columns would change respectively.

    • ikhsan August 22, 2014 at 11:51 pm - Reply

      Hi Mike,

      it is not possible, but you can do some trick like

      if radio#A1 is clicked, #A2 will be 200, #A3 will be 33, then the rest of formula refer to #A2 and #A3

  7. isaac April 12, 2014 at 3:50 am - Reply

    Would this work with a slider like jQuery UI or noUISlider?

  8. saad April 7, 2014 at 1:06 pm - Reply

    HI,

    how can u copy a dynamically generated select fileld(fetching the values from db) in another row plz help me out with with it

    http://www.xsanisty.com/project/calx/

    • ikhsan April 12, 2014 at 7:28 pm - Reply

      Hi saad,

      I am a bit unclear about your question, if you mean to iterate db value to select option, you can use foreach

      then you can apply calx as usual

      regards
      Ikhsan

  9. Dyniak August 22, 2013 at 4:54 pm - Reply

    Hi, i’m trying to put a variable from select option into a checkbox value. When checkbox is checked then it should add this variable from select into input checkbox value if not then it shouldnt. Sorry for my english but is there a possibility to do this? πŸ™‚

    • ikhsan September 20, 2013 at 11:25 pm - Reply

      Hi Dyniak,

      haven’t try such case before, but will try to find a way

      regards
      Ikhsan

Leave A Comment