Setup jQuery calx to work with checkbox, radio, selectbox

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

<input type="checkbox" id="A1" value="10" />

<!-- or -->

<input type="radio" id="A2" value="10" />

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

<input id="A1" type="checkbox" value="200" /> HDD Baracuda 4TB <br />
<input id="A2" type="checkbox" value="120" /> LED Monitor BenQ 21 inch<br />
<input id="A3" type="checkbox" value="105" /> MotherBoard Gigabyte <br />
<input id="A4" type="checkbox" value="200" /> Intel Proc. i3 2328 <br />
<input id="A5" type="checkbox" value="200" /> LiteOn Optical Drive <br />

<span id="A6" data-format="$ 0,0[.]00" data-formula="SUM($A1,$A5)"></span>

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

<input id="A1" type="radio" name="item" value="200" /> HDD Baracuda 4TB <br />
<input id="A2" type="radio" name="item" value="120" /> LED Monitor BenQ 21"<br />
<input id="A3" type="radio" name="item" value="105" /> MotherBoard Gigabyte <br />
<input id="A4" type="radio" name="item" value="200" /> Intel Proc. i3 2328 <br />
<input id="A5" type="radio" name="item" value="200" /> LiteOn Optical Drive <br />

<span id="A6" data-format="$ 0,0[.]00" data-formula="SUM($A1,$A5)"></span>

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

<input id="A1" type="radio" name="test" value="15" data-unchecked="1" />
<input id="A2" type="radio" name="test" value="20" data-unchecked="1" />

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

<select id="A1" name="proc">
    <option value="15">1 Core</option>
    <option value="22">2 Core</option>
    <option value="30">4 Core</option>
</select>

<input id="A2" type="text" data-format="$ 0,0[.]00" data-formula="$A1" />

but unfortunately, multiple select is not supported yet by Calx, maybe next release 😉

<select name="item1" id="item1" > <option value="10.50" data-id1="1">option 1</option> <option value="20.50" data-id1="2">option 2</option> <option value="30.50" data-id1="3">option 3</option> </select> <input id="price2" type="text" name="price2" value="" data-format="$ 0,0[.]00" data-formula="($item2)" /> <select name="item2" id="item2" > <option value="10.50" data-id2="1">option 1</option> <option value="20.50" data-id2="2">option 2</option> <option value="30.50" data-id2="3">option 3</option> </select> <input id="price2" type="text" name="price2" value="" data-format="$ 0,0[.]00" data-formula="($item2)" />

<select name="item1" id="item1" > <option value="10.50" data-id1="1">option 1</option> <option value="20.50" data-id1="2">option 2</option> <option value="30.50" data-id1="3">option 3</option> </select> <input id="price1" type="text" name="price1" value="" data-format="$ 0,0[.]00" data-formula="($item1)" /> <select name="item2" id="item2" > <option value="10.50" data-id2="1">option 1</option> <option value="20.50" data-id2="2">option 2</option> <option value="30.50" data-id2="3">option 3</option> </select> <input id="price2" type="text" name="price2" value="" data-format="$ 0,0[.]00" data-formula="($item2)" />

$rows = $pdoReault->fetchAssoc(); $select = '<select name="something" id="A1">'; foreach($rows as $row){ $select .= '<option value="'.$row['id'].'">'.$row['value'].'</option>'; } $select.= '</select>'; /** return or echo $select */

21 Comments

zubi July 17, 2019 at 11:43 am - Reply
HI
i want to store final calculation into database. how i can get values from input fields
Included Sales Tax
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? 😀
Urip May 26, 2015 at 6:18 pm - Reply
Mas bagaimana cara menggunakan input type number? suwun

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

$('#id').attr('data-attribute');

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

$('#id').calx('getCell', 'A1').getFormula();

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!

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.
  $(function(){ $('select').change(function(){ var selected = $(this).find('option:selected'); $('id').val(selected.data('id')); }).change(); });
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
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
isaac April 12, 2014 at 3:50 am - Reply
Would this work with a slider like jQuery UI or noUISlider?
- ikhsan April 12, 2014 at 3:54 am - Reply
  Sure, here is the sample http://ari.xsanisty.com/mortgage/
saad April 7, 2014 at 1:09 pm - Reply
hi!
sry for the wrong link
http://prototype.xsanisty.com/calx/sample/calx_with_dynamic_form.html
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
  $rows = $pdoReault->fetchAssoc(); $select = '<select name="something" id="A1">'; foreach($rows as $row){ $select .= '<option value="'.$row['id'].'">'.$row['value'].'</option>'; } $select.= '</select>'; /** return or echo $select */
  then you can apply calx as usual
  regards
  Ikhsan
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

SUM Scenario with checkbox and radio button

Working with select-box

21 Comments

Leave A Comment Cancel reply