Math Functions - Post ID 272391

User 2844506 Photo


Registered User
7 posts

How do I perform a simple calculation on two number fields then show the result? Also how do you invoke the calculation without submitting the form?

Edward
User 187934 Photo


Senior Advisor
20,181 posts

Hi Edward,
You would use a little JQuery. Have you searched for the numerous examples I've done on the forum?
Take a look at a few and then post a link to your form and I bet I could help you get it going.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2844506 Photo


Registered User
7 posts

I searched all the posts and I can see the JQuery code but how does the code get executed? Is there a button or return key you hit to execute? I built the form with two fields and a HTML element for the code but when does it execute, how do I get the result?
User 2844506 Photo


Registered User
7 posts

I found out you need to specify the "onclick" or "onchange" event for a field to invoke the calculation call.
Found on the following site: http://www.javascript-coder.com/javascr … ript.phtml
User 2844506 Photo


Registered User
7 posts

I am still having trouble getting a result. It seems any change I make to the input numbers no calculation result. I have 3 numbers I am trying to multiple and pass the result to a text control. Here is my html element code, what I am doing wrong.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function calctbytes(){
var rows = $("#rows").val();
var columns = $("#columns").val();
var bytes = $("#bytes").val();
$("#result").text(rows*columns*bytes);
}
$('input[name="rows"]').on('change', function(){
calctbytes()
});
$('input[name="columns"]').on('change', function(){
calctbytes()
});
$('input[name="bytes"]').on('change', function(){
calctbytes()
});
</script>
User 2844506 Photo


Registered User
7 posts

Here is some code that does work without Form Builder controls, but I would like to use the power of Form Builder to style the controls and make MySqL database entries.


<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="rows" type="number" name="rows" value="720" max="99999" min="1"<p>Pixel Rows</p>
<input id="columns" type="number" name="columns" value="1280" max="99999" min="1"<p>Pixel Columns</p>
<input id="bytes" type="number" name="bytes" value="2" max="8" min="1"<p>Bytes per Pixel</p>

<p id="potential">Total Bytes = <b id="result"></b></p>
<script type="text/javascript">
$(":input").on('keyup mouseup', function () {
var rows = $("#rows").val();
var columns = $("#columns").val();
var bytes = $("#bytes").val();
$("#result").text(rows*columns*bytes);
}).trigger('mouseup');
</script>
</body>
</html>
User 187934 Photo


Senior Advisor
20,181 posts

Can you please provide a link to your form online. It hard to help when I can't see what were actually looking at.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 56337 Photo


Registered User
12 posts

I have the same prob. Here is my form
http://hbcactiviteit.coffeecup.com/forms/spaghetti/

I can get the result in Bedrag Volwassen and in Bedrag Kinderen. But I want to add them together and see the result in my TotalBox (not shown, because doesn't work).

Thanks !!
User 187934 Photo


Senior Advisor
20,181 posts

Hi Luc,
Give this a try. You'll need to add an input for the total named Total or adjust the script.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var jQ = $.noConflict(true);
jQ(document).ready(function(){

jQ("input[name='text77'], input[name='text78']").keyup(function(){
var valone = jQ("input[name='text77']").val();
var valtwo = 10;
if(jQ.isNumeric(valone)){
var totalv = (valone * valtwo);
jQ("input[name='text74']").val(totalv.toFixed(2));
}

var valeen = jQ("input[name='text78']").val();
var valtwee = 7;
if(jQ.isNumeric(valeen)){
var totalk = (valeen * valtwee);
jQ("input[name='text75']").val(totalk.toFixed(2));

}
totalv = totalv || 0
totalk = totalk || 0
var Total = parseInt(totalv) + parseInt(totalk) ;
jQ("input[name='total']").val(Total.toFixed(2));

});
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 56337 Photo


Registered User
12 posts

Great !!! This works fine !!!!:D:D:D:D:D

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.