how to get Gravity Forms to calculate a product price on the fly when using ajax to auto-populate number fields

1,490 views
Skip to first unread message

barbara schendel

unread,
Aug 18, 2015, 11:57:47 AM8/18/15
to Minneapolis St. Paul WordPress User Group
Hey all! 
I have a gravity form used to let parents register their kids for some classes. For each kid, they are asked for student info, and then class info. I have a custom post type called Classes which has custom meta fields for price, location, day and time.  So in the form, when the user selects which location they want, a javascript pulls all the currently-available days for that location, and then based on their selection of day, it then populates the currently-available times. It then fills in the price into a Number field used for calculations. Elsewhere in the form I have a product that calculates its price based on these number fields. See http://www.awesomescreenshot.com/image/496169/823ffbd338a0adc696fd8b152514da9f

Problem is, it does not actually update this product when populating these values on the fly. 

I had my other developer write this javascript and he's not very familiar with gravity forms and all the available hooks, so he is not sure how to proceed. Can anyone give me any pointers? 

the js part of the plugin is below in case it's useful to anyone...
-----------------------------------------------------
$(document).ready(function(){
    var groups = [
        {location:'#input_3_32',day:'#input_3_33',time:'#input_3_34',cost:'#input_3_40'},
        {location:'#input_3_42',day:'#input_3_36',time:'#input_3_37',cost:'#input_3_41'},
        {location:'#input_3_49',day:'#input_3_50',time:'#input_3_51',cost:'#input_3_52'},
        {location:'#input_3_57',day:'#input_3_58',time:'#input_3_59',cost:'#input_3_60'},
    ]

    var sum;

    $.each(groups,function(index,value){
        $(value.location).change(function(){
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: { location : $(this).val(), action: 'ptg_get_days' },
                success: function(data){
                    $(value.day).empty();
                    var options = $.parseJSON(data);
                    $(value.day).append('<option value="">Select Day</option>');
                    for(i=0;i<options.length;i++){
                        $(value.day).append('<option value="'+options[i]+'">'+options[i]+'</option>');
                    }
                }
            });
        })

        $(value.day).change(function(){
            $.ajax({
                type: 'POST',
                url: '/wp-admin/admin-ajax.php',
                data: { location:$(value.location).val(),day : $(this).val(), action: 'ptg_get_times' },
                success: function(data){
                    $(value.time).empty();
                    var options = $.parseJSON(data);
                    $(value.time).append('<option value="">Select Time</option>');
                    for(i in options){
                        $(value.time).append('<option value="'+options[i]+'">'+i+'</option>');
                    }
                }
            });
        })

        $(value.time).change(function(){
            $(groups[index].cost).val($(this).val());
            /*
            sum = 0;
            for (var i in groups)
            {
                sum += parseInt($(groups[i].time).val());
            }
            */
        })
    })
})

Nick Ciske

unread,
Aug 18, 2015, 12:20:20 PM8/18/15
to mpls-stpau...@googlegroups.com
My guess is Gravity Forms doesn’t understand that you’re changing the price on the fly and is not triggering the script that updates the total.

Are the “Class X price...” fields product or number fields?

Essentially, when you change the price you’ll also need to also tell GF to re-total the form (unless your using a field it understands as a product so it can auto re-total).

OR

Use product option fields for your dropdowns (make sure you have the correct option value format for the prices) and GF will auto re-total for you (as it auto assigns onchange handlers for product fields).

OR

Put the total on the next page ;-)

_________________________
Nick Ciske
VP Web Engineering
@nciske

barbara schendel

unread,
Aug 18, 2015, 2:42:22 PM8/18/15
to mpls-stpau...@googlegroups.com
Thanks Nick! They are number fields. Then there is a product which calculates its price based on those number values. I will check out that post and see if that helps. Thanks!
Reply all
Reply to author
Forward
0 new messages