Jump to content
sjmcarter

Dynamically Summing Fields In A Submission Form

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...  :wacko:
 
<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!

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...