I am using Contact Form 7, and the Contact Form 7 Calculator plugin: https://wordpress.org/plugins/cost-calculator-contact-form-7/

I have a form with checkbox fields (member fees) that add value to a “total cost” calculator field when checked.

And then I have some “add another member” fields that are added with a button using jQuery, which include another set of these checkboxes for each additional member. They can also “remove member” if they choose to.

When those fields are added or removed via jQuery, I also have it check/uncheck the member fees checkboxes. But unfortunately, it does not update the value of the “total cost” calculator field.

This is the jQuery for one set of the additional member fields:

// Add a Second Member and check the membership box
jQuery( ".add_button.second" ).click(function() {
    jQuery( ".checkbox-member2 input" ).prop( "checked", true );        

// Remove a Second Member and uncheck the membership box
jQuery( ".add_button.second .remove" ).click(function() {   
    jQuery( ".checkbox-member2 input" ).prop( "checked", false );

My calculator field is:

    “(is_member1 * 200) + (isnot_member1 * 275) 
        + (is_member2 * 200) + (isnot_member2 * 275) 
        + (is_member3 * 200) + (isnot_member3 * 275) 
        + (is_member4 * 200) + (isnot_member4 * 275)”

And the generated HTML for the calculator field:

    data-formulas="(is_member1 * 200) + (isnot_member1 * 275) 
        + (is_member2 * 200) + (isnot_member2 * 275) 
        + (is_member3 * 200) + (isnot_member3 * 275) 
        + (is_member4 * 200) + (isnot_member4 * 275)"

The Visual: Example of checkboxes and calculator field

How can I get the calculator field to update, when I use jQuery to check/uncheck the checkbox fields?

  • How is the 'total cost' field being calculated and output? The data-forumlas field looks complicated. How is that coming into play? Because if you just want to update your total cost field that's easy, $('.occf7cal-total').val([your value here]) but I don't think that's what you're looking for.
    – Pixelsmith
    Jul 2, 2021 at 18:37
  • 1
    Instead of toggling the "checked" property, try manually triggering an event on the checkbox to change it - probably a click. jQuery( ".checkbox-member2 input" ).click(), I think. Might cause whatever CF7's calculated fields are listening for to fire. Or change the prop and manually trigger a change and/or input event. All of that said, this question is not concerning the WordPress software, as as such may be closed as off-topic for our community.
    – bosco
    Jul 2, 2021 at 19:25
  • @Pixelsmith - I forgot to add which plugin I'm using for the calculator field, I couldn't add it as a tag: Contact Form 7 Calculator plugin: wordpress.org/plugins/cost-calculator-contact-form-7. I've updated this in the details as well. Jul 2, 2021 at 19:45