mathematical calculation using jquery

Question

this question is not similar to Mathematical calculations using jQuery/Ajax

so please downvoters.

i use two sets of radio buttons This fiddle i found shows the exact what i want http://jsfiddle.net/8FXFE/6/

can i add another hidden sort of value to those buttons that i can use in any calculation?

HTML

<div class="textForm">
<input type="radio" name="txtNumber" value="100" checked="checked" />100
<input type="radio" name="txtNumber" value="200" />200
<input type="radio" name="txtNumber" value="500" />500
<input type="radio" name="txtNumber" value="1000" />1000
<input type="radio" name="txtNumber" value="10000" />10000
<input type="radio" name="txtNumber" value="other" />other
<input type="text" name="other_field" id="other_field" onblur="checktext(this);"
/>
</div>
<div class="formText">
    <input type="radio" name="txtSpace" value="RJ" checked="checked"
    />Space 1.
    <br />
    <input type="radio" name="txtSpace" value="SM" />Space 2.
    <br />
</div>

<h3>Output:</h3>

<div id="output"></div>

like suppose i want to make the formula like this..

IF 100 IS SELECTED AND Space 1. IS SELECTED

then the formula shall go like this hidden value of (name="txtSpace" value="RJ") + hidden value of (name="txtNumber" value="100")

can it be done? and if yes,, how?

_"can i add another hidden sort of value to those buttons that i can use in any calculation?"_ - Yes. Use html5-style `data-` attributes. — nnnnnn, Jan 31 '13 at 12:46
you cant hide anything in javascript as you can see everything in firebug. — Sandeep Rao, Jan 31 '13 at 12:50
Why don't you add this hidden value inside your function? For example If radio 100 is selected a = "hiddenValue1", else if rado 200 is selected a = "hiddenValue2" and so on... However it will be possible to see in Chrome console or Firebug as Sandeep Rao said. — kmb, Jan 31 '13 at 12:54
@kmb is people can see that values in firebug or chrome.. is it possible for them to hack or change those values?? — Ashis, Jan 31 '13 at 12:57
@Ashis Unfortunatelly I don't know if there is possible to hack this values, but if u press ctrl + shift + j in chrome you can see all java scripts or html rendered on your page — kmb, Jan 31 '13 at 13:13
yes people can edit the values, that's what serverside validation is for — David Fregoli, Jan 31 '13 at 13:19
@DavidFregoli thankx fortunately i know to code in php and so i can solve this problem by server side validation... :) — Ashis, Jan 31 '13 at 14:06
@AnaMaria: [Am I using too much jQuery? When am I crossing the line?](http://stackoverflow.com/a/2826810) — Madara's Ghost, Aug 02 '13 at 12:26

score 1 · Answer 1 · answered Jan 31 '13 at 12:55

try this script.just copy and paste this code.

 <script type="text/javascript">
function fnc()
{
count1=document.getElementsByName("txtNumber").length;
count2=document.getElementsByName("txtSpace").length;
for(i=0;i<count1;++i)
{
    el=document.getElementsByName("txtNumber").item(i);
    if(el.checked)
        firstnumber=el.value;

}

for(i=0;i<count2;++i)
{
    el=document.getElementsByName("txtSpace").item(i);
    if(el.checked)
        secondnumber=el.value;

}
if(firstnumber=='100' && secondnumber=='RJ')
{
    alert("now you can write your formula here");
}
}
</script>

score 1 · Answer 2 · answered Jan 31 '13 at 13:49

1

You would need a function like this to keep track of the form values:

updateForm = function()
{
      var $txtNumber = $('[name=txtNumber]:checked'),
          $txtSpace = $('[name=txtSpace]:checked'),
          out = $txtSpace.val();

    if ($txtNumber.val() == 'other') {
        out += $('#other_field').val(); // use value of other_field
    } else {
        out += $txtNumber.val(); // use value from radio button
    }

    $('#output').text(out);
}

Then, to initialize:

updateForm();
$("input[name='txtNumber'],input[name='txtSpace']").change(updateForm);

answered Jan 31 '13 at 13:49

Ja͢ck

170,779
38
263
309

Thats an interesting approach.. fiddle? – Ashis Jan 31 '13 at 14:00
1

@ashis I will leave that up to you :) – Ja͢ck Jan 31 '13 at 14:16

David Fregoli · Answer 3 · 2013-01-31T13:07:57.723

0

use

<input data-fieldname="">

and jquery

$(this).data('fieldname')

http://jsfiddle.net/FRu67/ <-- Tidied things up

try avoiding input[name='txtNumber'] type selectors because they are among the slowest

edited Jan 31 '13 at 13:07

answered Jan 31 '13 at 12:54

David Fregoli

3,377
1
19
40

mathematical calculation using jquery

3 Answers3