Perform A Calculation On Values Entered In A Webform

[majik1973]

Hi all,

 

I've been looking through the forums for what I'm looking to do and came close using the "JS: Perform a calculation on values entered in a WebForm" post.  I made some minor changes, but I'm very inexperienced to know how to get the extra little bit I need.

 

What I want to do is to have an update and/or submission form that will allow my people to enter two values (going by the original post's example), we'll call them Length and Width.  I then wanted the total Area being calculated to be under 100 (just as an example).  If my people made Area too large, it should give an alert saying so (without updating the table's Length and Width fields).

 

Here is what I wound up with to this point:

 

<SCRIPT LANGUAGE="JavaScript">

 

function calculate()

 

{

   var v_length = parseFloat(document.getElementById("EditRecordLength").value);

   var v_width = parseFloat(document.getElementById("EditRecordWidth").value);

   var v_area = (v_length * v_width);

 

   if(v_area>100) {

     window.alert("Too large.. Please enter smaller dimensions");

} else {

     document.getElementById("EditRecordArea").value = Math.round(v_area);

     window.alert("Thank you.. Information is registered!");

}

}

document.getElementById("caspioform").onsubmit=calculate;

 

</SCRIPT>

 

I figure it has to do with the first two variables and that is causing the table to update regardless of the value for Area.  I just don't know how to make the change.

 

Thank you for any/all help!

 

 

[majik1973]

Bump, hopefully..

[aam82]

Try playing with this. It adds the onblur event to a field, and runs a function on the event. onblur is the event that occurs when one focuses away from an element.

 

You could add a virtual field for Area, and onblur to both the length and width fields, and your function would begin with setting virtual field = area, then your conditional.

<script>
document.getElementById('cbParamVirtual1').onblur=blurFunction;
function blurFunction() {
  if (document.getElementById('cbParamVirtual1').value > 100) {
  window.alert("too high");
  }
}
</script>

[aam82]

Also, if anyone knows why HTML5 form validation doesn't work with Caspio forms, I'd be interested to know. 

[majik1973]

Thank you aam82!  I will toy around with that some.  Only way I learn much of anything :-)

[svitlanataran]

Hi, 

Code will be different for an Update and a Submission form  I've edited your code, you can use the following code for a submission form:

 

<SCRIPT LANGUAGE="JavaScript">

 function calculate()
 {
   var v_length = parseFloat(document.getElementById("InsertRecordLength").value);
   var v_width  = parseFloat(document.getElementById("InsertRecordWidth").value);
   var v_area   = (v_length * v_width);
  document.getElementById("InsertRecordArea").value = Math.round(v_area);
   
if(v_area >100) {
     window.alert("Too large.. Please enter smaller dimensions");
 return false;
} else {      
     window.alert("Thank you.. Information is registered!");
}
}

 document.getElementById("caspioform").onsubmit=calculate;

</SCRIPT>

If you need to use this code on the Update form, replace the prefix “InsertRecord” with “EditRecord” in the code.

 

Hope it helps.

[MayMusic]

Easiest way to get the correct ID of element is to right click on it and then select "Inspect Element"