Calculate totals in Web Form Builder?...

User 1982097 Photo


Registered User
72 posts

I don't know how to change that. I have the properties for those fields checked as read only, but that is all.
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

I didn't disable it. not sure how it is happening
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

Eric,
I need to eliminate the GB- in front of each product name because it gets imported into the database and kind of messes up our invoicing - how would this change the jquery...? Thanks

// Add the data attribute to hold the price add one for each input
jQ('input[name="GB-HarmonyDecaf-ground"]').data('price',20.25);
jQ('input[name="GB-SunriseBreakfast-ground"]').data('price',25.95);

// on keyup check that the value isn't blank and it's numeric
jQ('input[name^="GB"]').on('keyup', function() {

if (jQ(this).val()!="" || jQ.isNumeric(jQ(this).val())){


telimon wrote:
Eric,
Is there a way to make the Total_Items_Price below included in the submission of the form data to the database?
It doesn't currently.
much thanks

Eric Rohloff wrote:
There's several ways to accomplish this. You could add hidden inputs to the form by using an html element but that may get a little clunky.
I think this will get you what you need. You will have to add the rest of the price options as I only did the first two as an example. You'll also need a Price total input to show your running total. I named mine Total_Items_Price.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>var jQ = $.noConflict(true);
// version 2
jQ( document ).ready(function() {
// Set Total_Items_Entered and Total_Items_Price to read only
jQ('input[name="Total_Items_Entered"]').prop('readonly', true);
jQ('input[name="Total_Items_Price"]').prop('readonly', true);
// add the class sum to all inputs that we want to add
jQ('input[name^="GB"]').addClass( "sum" );
// This is where the price will be set for each input
// Add the data attribute to hold the price add one for each input
jQ('input[name="GB-HarmonyDecaf-ground"]').data('price',20.25);
jQ('input[name="GB-SunriseBreakfast-ground"]').data('price',25.95);

// on keyup check that the value isn't blank and it's numeric
jQ('input[name^="GB"]').on('keyup', function() {

if (jQ(this).val()!="" || jQ.isNumeric(jQ(this).val())){

// if input value is good fire the function
calc_dues();
}
});

// This is the calculate function
function calc_dues() {

var sum = 0;
var sum_price = 0;
jQ('.sum').each(function(){
if(jQ.isNumeric(this.value)){
sum += parseFloat(this.value);
sum_price += parseFloat(this.value) * parseFloat(jQ(this).data('price'));
jQ('input[name="Total_Items_Entered"]').val(sum);
jQ('input[name="Total_Items_Price"]').val(sum_price.toFixed(2));
}
});

}
});</script>

And yes I like coffee.
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

telimon wrote:
I don't know how to change that. I have the properties for those fields checked as read only, but that is all.

Undo that in the form builder as that's actually not true. It actually sets them to disable. I use the jQuery script to set them to read only.
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 187934 Photo


Senior Advisor
20,181 posts

telimon wrote:
Eric,
I need to eliminate the GB- in front of each product name because it gets imported into the database and kind of messes up our invoicing - how would this change the jquery...? Thanks


You can adjust the script to target those inputs since your listing them out already. For example.
jQ('input[name="Harmony-Decaf-GROUND"]').attr({data:('price',12), class:"sum"});
jQ('input[name="Harmony-Decaf-WHOLE"]').attr({data:('price',14), class:"sum"});
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 1982097 Photo


Registered User
72 posts

Yes ok. Actually, I meant this script..How do I list the input name(s) since they are not all the same? Can't use "GB"
thx

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>var jQ = $.noConflict(true);
// version 1
jQ( document ).ready(function() {
// Set Total_Items_Entered to read only
jQ('input[name="Total_Items_Entered"]').prop('readonly', true);
// add the class sum to all inputs that we want to add
jQ('input[name^="GB"]').addClass( "sum" );
// on keyup run calc_dues
jQ('input[name^="GB"]').on('keyup', function() {
calc_dues();
});
// This is the calculate function
function calc_dues() {
var sum = 0;
jQ('.sum').each(function(){
if(jQ.isNumeric(this.value)){
sum += parseFloat(this.value);
jQ('input[name="Total_Items_Entered"]').val(sum);
}
});
}
});</script>
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

This is probably what you want in one script. You can remove the GB from input names.
You can see it working here.
http://ericrohloff.com/coffeecup/ccforu … index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>var jQ = $.noConflict(true);
// version 4
jQ( document ).ready(function() {
// Set Total_Items_Entered and Total_Items_Price to read only
jQ('input[name="Total_Items_Entered"]').prop('readonly', true);
jQ('input[name="Total_Items_Price"]').prop('readonly', true);

// This is where the price will be set for each input
// Add the data attribute to hold the price add one for each item input
jQ('input[name="Harmony-Decaf-GROUND"]').data('price',12);
jQ('input[name="Sunrise-Breakfast-GROUND"]').data('price',12);
jQ('input[name="Bold-Reserve-GROUND"]').data('price',12);
jQ('input[name="Hazelnut-Creme"]').data('price',12);
jQ('input[name="Pumpkin-Spice"]').data('price',12);
jQ('input[name="French-Vanilla"]').data('price',12);
jQ('input[name="Caramel-Creme"]').data('price',12);
jQ('input[name="Chocolate-Raspberry"]').data('price',12);
jQ('input[name="Organic-Heritage-GROUND"]').data('price',14);
jQ('input[name="Harmony-Decaf-WHOLE"]').data('price',12);
jQ('input[name="Sunrise-Breakfast-WHOLE"]').data('price',12);
jQ('input[name="Bold-Reserve-WHOLE"]').data('price',12);
jQ('input[name="Organic-Heritage-WHOLE"]').data('price',14);
jQ('input[name="K-Kups-Sunrise-Breakfast"]').data('price',12);
jQ('input[name="K-Kups-Salted-Caramel"]').data('price',12);
jQ('input[name="Clever-Cup-Filters"]').data('price',8);
jQ('input[name="Earl-Grey"]').data('price',12);
jQ('input[name="Welsh-Morning"]').data('price',12);
jQ('input[name="Green-Tea-Mango"]').data('price',12);
jQ('input[name="Paradise-Passion"]').data('price',12);
jQ('input[name="Organic-Green-Sencha"]').data('price',12);
jQ('input[name="Organic-Darjeeling"]').data('price',12);
jQ('input[name="Berry-Basket"]').data('price',12);
jQ('input[name="Mountain-Gold"]').data('price',12);
jQ('input[name="Tea-Infuser-Basket"]').data('price',8);
jQ('input[name="Orinoco-Organic-Cocoa"]').data('price',12);
jQ('input[name="Classic-Natural-Cocoa-Mix"]').data('price',10);
jQ('input[name="Bombay-Chai-Latte"]').data('price',10);
jQ('input[name="Vanilla-Bean-Shortbread-Cookies"]').data('price',8);
jQ('input[name="Espresso-Chocolate-Chip-Shortbread-Cookies"]').data('price',8);
jQ('input[name="Classic-Gift-Pack"]').data('price',26);
jQ('input[name="Deluxe-Gift-Pack"]').data('price',39);


// on blur check that the value is numeric
jQ('input').on('blur', function() {
// if input value is numeric fire the function
if(jQ.isNumeric(this.value)){
calc_dues();
}
});

// This is the calculate function
function calc_dues() {

var sum = 0;
var sum_price = 0;
// sum all numeric inputs except the totals
jQ('input:not(input[name="Total_Items_Entered"],input[name="Total_Items_Price"])').each(function(){
if(jQ.isNumeric(this.value)){
sum += parseFloat(this.value);
sum_price += parseFloat(this.value) * parseFloat(jQ(this).data('price'));
jQ('input[name="Total_Items_Entered"]').val(sum);
jQ('input[name="Total_Items_Price"]').val(sum_price.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 1982097 Photo


Registered User
72 posts

Thanks Eric. Is there a way to exclude a particular input field from the calulations? ie. "collected"
Coffee roasting is my passion - seriously
User 1982097 Photo


Registered User
72 posts

I'm referring to the "items entered"
telimon wrote:
Thanks Eric. Is there a way to exclude a particular input field from the calulations? ie. "collected"
Coffee roasting is my passion - seriously
User 187934 Photo


Senior Advisor
20,181 posts

In the last script posted this line excludes these to inputs from the calculations.
:not(input[name="Total_Items_Entered"],input[name="Total_Items_Price"])
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

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.