Dynamically Summing Fields In A Submission Form

[sjmcarter]

Hi, I'm new to using Caspio bridge.  I am more accustomed to creating web forms directly using PHP and JQuery, but I need to make some updates to a Caspio form.

 

I have a submission form that has 4 text fields.  The first 3 fields will accept currency values.  The last field sum sum the previous one in real time.

 

For example, if in field 1 I enter value 25, then 25 should show in field 4 when event focus changes.  If fields 1 and 2 have values 25 and 17, respectively, then when the event focus changes from field 2 the value in field 4 should be 42.

 

I know how to d9 this using straight JavaScript or J-Query, but I am having trouble creating functions and adding triggers and events to the elements in my submission form.

 

Any help would be greatly appreciated.

[MayMusic]

what is the code you are having for this? I might be able to help you on the part you want to reference to the field values.

[cgonzalezalcala]

Any luck with figuring this out?

I also would like for a field that shows dynamically when the above four fields are being filled out and returning a sum for those fields.

 

[casGary]

Hi cgonzalezalcala,

 

Here is a suggestion 

<script type="text/javaScript">

function mySum(){
var one = parseInt(document.getElementById("ID_OF_THE_FIRST_FIELD").value);
var two = parseInt(document.getElementById("ID_OF_THE_SECOND_FIELD").value);
var three = parseInt(document.getElementById("ID_OF_THE_THIRD_FIELD").value);
if(!one)
	{
		one=0;
	}
if(!two)
	{
		two=0;
	}
if(!three)
	{
		three=0;
	}
document.getElementById("four").value = one + two + three;

}
document.getElementById("ID_OF_THE_FIRST_FIELD").onchange = mySum;
document.getElementById("ID_OF_THE_SECOND_FIELD").onchange = mySum;
document.getElementById("ID_OF_THE_THIRD_FIELD").onchange = mySum;
</script>

Place that to the footer of your DataPage.

Here is the instruction on how to add header and footer.

 

Let me know if it helps.

[cgonzalezalcala]

Hi Caspio Ninja!
Thanks for the tip. My CSS knowledge is limited so my first go at it did not work. I have four variables that I would like their sum to add to 100.
 
Here's what I did... 
 
<script type="text/javaScript">
 
function mySum(){
var one = parseInt(document.getElementById("Blame_Low_Income,").value);
var two = parseInt(document.getElementById("Lack_of_Community_Resources").value);
var three = parseInt(document.getElementById("Exploitation_of_Poor,").value);
var four = parseInt(document.getElementById("Government_Policies_and_Barriers").value);
if(!one)
{
one=0;
}
if(!two)
{
two=0;
}
if(!three)
{
three=0;
}
if(!four)
{
four=0;
}
document.getElementById("five").value = one + two + three + four;
 
}
document.getElementById("Blame_Low_Income,").onchange = mySum;
document.getElementById("Lack_of_Community_Resources").onchange = mySum;
document.getElementById("Exploitation_of_Poor,").onchange = mySum;
document.getElementById("Government_Policies_and_Barriers").onchange = mySum;
</script>
 
Thanks so much for helping out!

[casGary]

Hi again,

Do you want to place the sum of your four fields to the fifth one?

Could you specify what exactly you wish to implement?

 

Regards

[cgonzalezalcala]

Yes I want a fifth field to show the sum while text is being inputted in the field.

I got a script to work, yet the data is not populating my table.

 

This is what I borrowed to make the table do what I wanted, now my problem, like I said is that I can't get the data to populate my Caspio table since I wrote this on an HTML block. Any ideas?

 

<script type="text/javascript">

 

function calcSum()

{

var Sum = 0;

Sum = Number(document.getElementById("Q7_r1").value)

+ Number(document.getElementById("Q7_r2").value)

+ Number(document.getElementById("Q7_r3").value)

+ Number(document.getElementById("Q7_r4").value);

document.getElementById("Q7_tot").value = Sum;

}

</script>

 

<table border="0" cellpadding="1" cellspacing="0" width="60%">

<tr>

  <td width="40%"> <b>Reasons poverty exist</b> </td>

  <td> <b>% Percent each contribute to poverty</b> </td>

</tr>

<tr>

  <td> Low income people themselves are to blame for their situation  </td>

  <td> <input name="Q7_r1" id="Q7_r1" type="text" size="3" onblur="calcSum()">% </td>

</tr>

<tr>

  <td> Lack of community resources or willingness to help the poor </td>

  <td> <input name="Q7_r2" id="Q7_r2" type="text" size="3" onblur="calcSum()">% </td>

</tr>

<tr>

  <td> Exploitation of the poor (pay day lenders, low-wage employers, etc)</td>

  <td> <input name="Q7_r3" id="Q7_r3" type="text" size="3" onblur="calcSum()">% </td>

</tr>

<tr>

  <td> Government policies and barriers that will always keep the poor in poverty </td>

  <td> <input name="Q7_r4" id="Q7_r4" type="text" size="3" onblur="calcSum()">% </td>

</tr>

<tr>

  <td> <b>TOTAL</b> </td>

  <td> <b><input name="Q7_tot" id="Q7_tot" size="3">%</b> </td>

</tr>

</table>

[casGary]

Hello cgonzalezalcala, 

You just need to reference your caspio fields correctly.

The script seem to be working fine.

Here you will find the full information on how to refence your fields.

 

best regards.

[cheonsa]

Hi all,

 

As we strive to enhance our platform, Caspio released new features last July 12, 2018. With the current release, Calculated Values in submission form is now available. It generates dynamic calculations that automatically update as users interact with your form. You can check this link for the documentation: https://howto.caspio.com/datapages/datapage-components/calculated-values/

 

Regards,

kristina