Doing calculations/logic in HTML form

Implementing
1

Hello friends, i have started experimenting with creating custom forms via html form entry module.I have limited java script/j query knowledge. Could you help me as to why thi code is not working. Actually i have three variables(concept ID) pre configured in dictionary ( Hb,TLC and sum( which is to be a sum of hb and TLC). I wish once i enter Hb and TLC values sum(which would be a some of Hb and TLC autofill itself ) before submitting form so that i can have , three indicators.Hb,TLC and sumform (which is to be derived and is a sum of Hb and TLC Here is some of non working code i have tried so far…I unserstand it is an html java script question ,but i would greatly appreciate if you helped me get past it workin code .follows…


<tr>
     <td><obs conceptId="162828" labelText="Hb"/></td>
                 </tr>
             
                 <tr>
                                     <td><obs conceptId="162829" labelText="TLC"/></td>
                  </tr>
<tr>
<td><button onclick="calculateAandB()">Sum it</button></td></tr>

<tr>
<td><span Id="calculated-value"></span></td></tr>
 
<script>
function calculateAandB() {
    var displayVal = getValue("162828") + getValue("162829");
    $j('#calculated-value').html(displayVal);
}
 
getField("162828").change(calculateAandB);
getField("162829").change(calculateAandB);
</script>

```
2

Other unsuccesful approach i took…

<tr>
     <td><obs conceptId="162828" labelText="Hb"/></td>
                 </tr>
             
                 <tr>
                                     <td><obs conceptId="162829" labelText="TLC"/></td>
                  </tr>
<tr>
<td><button onclick="calculateAandB()">Sum it</button></td></tr>

<tr>
<td><span Id="calculated-value"></span></td></tr>
 
<script>
function calculateAandB() {
    var displayVal = getValue("162828") + getValue("162829");
    $j('#calculated-value').html(displayVal);
}
 
getField("162828").change(calculateAandB);
getField("162829").change(calculateAandB);
</script>

```
3

Did you read this? https://wiki.openmrs.org/display/docs/HTML+Form+Entry+JavaScript+Reference

4

@anupam you need to put an “id” attribute on the obs tag, and then you need to refer to “yourid.value” in the getValue and getField functions.

See the link that Daniel shared in the post before this one.

5

@darius I improvised code like this…

<tr>
     <td><obs conceptId="162826" labelText="Hb"/></td>
                 </tr>
              
                 <tr>
                                     <td><obs conceptId="162827" 

labelText="TLC"/></td>
                  </tr>
<tr>
<td><button onclick="calculateAandB()">Sum it</button></td></tr>

<tr>
<td><span Id="162828" labelText="Sum"></span></td></tr>
 
<script>
function calculateAandB() {
    var displayVal = getValue("162826") + getValue("1628227");
    $j('#162828').html(displayVal);
}
 
getField("162826").change(calculateAandB);
getField("162827").change(calculateAandB);

</script>
```
<img src="/uploads/default/original/2X/4/4337d7abd5e0103e768c48fa49d92d49fa7084c7.jpg" width="435" height="260"><img src="/uploads/default/original/2X/c/c376122b14ba41c53373db431106fdbcec11f920.jpg" width="596" height="146">

I am unable to get values, just getting zero when i click sum it..i have also tried removing sum button but doesnot work. I understand i am getting stuck at something very basic, but if you could help me get unstuck with very simple query via a a solved resolution of same problem in terms of code,would be grateful
6

See what I said above.

Specifically, you need to do something like

<obs conceptId="..." id="tlc"/>
<script>
getValue("tlc.value")
getField("tlc.value").change(...)
</script>
1 Like