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
Edward
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.
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:](/images/bbcode_emoticons/cool.png)
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
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
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?
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
Found on the following site: http://www.javascript-coder.com/javascr … ript.phtml
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>
<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>
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>
<!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>
Can you please provide a link to your form online. It hard to help when I can't see what were actually looking at.
![;)](/images/bbcode_emoticons/wink.png)
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
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
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 !!
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 !!
Hi Luc,
Give this a try. You'll need to add an input for the total named Total or adjust the script.
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>
<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
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
Great !!! This works fine !!!!![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
![:D](/images/bbcode_emoticons/big_smile.png)
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.