Edit user-entered input amount? (Total not updating)

Gravity Support Forums » Plugin Support » Gravity Forms PayPal Add-On

Shelly
Member

Hello all :)

I had a quickie question for you. I know it has to do with the jQuery that's in there with the PayPal add-on, but I don't know how this could be fixed. For the record, I'll also say this is on a form on a live site, but it's behind a "You have to log in to see this" page, so I can't just pass a URL. So I'll be as clear as I can on this.

Okay, said form is really simple. It's basically to allow members to renew their membership. The form is connected to the logged-in user's name and email, so all they have to do is choose the membership level (from a dropdown) and click "submit" to be taken to paypal and have everything processed. Easy enough, right?

Well, they've asked me to add a new field: basically an empty input field for an "Extra donation amount", if the end user would like to toss in a couple of extra bucks on top of the membership fee. it's user-entered data, so they get to type in whatever number they want and add it to the membership fee.

it works just fine, but they have an issue with one itsy-bitsy-tiny thing: the total amount doesn't update unless you click outside the input box. If you click the submit button, the total flashes the updated amount (you see it only in the time it takes from you to get from the form to PayPal), but unless you click outside the input box (or hit enter) you pretty much don't see the amount get updated at all.

So they were wondering if there was some way I could fix it so the Total amount is updated in real-time as you type the additional amount. I know it can be done with jQuery, but since the form is already using AJAX/jQuery, I didn't know the best way to override what it's doing. Like if you could hit "enter" and have the total update (instead of immediately submit) that would even be improvement enough that they'd be happy.

Anyone have any suggestions?

Posted 12 years ago on Thursday September 6, 2012 | Permalink
David Smith
Member
Hi Shelly,

The general idea is that you'll bind the gformCalculateTotalPrice() function, which Gravity Form's already runs on "blur" (aka, when the field loses focus), to the "keyup" event. This will run the gformCalculateTotalPrice() function every time the user presses a key while that input is focused.
```
[js]
jQuery(document).ready(function($){

    $('#input_1').keyup(function(){
        gformCalculateTotalPrice(8);
    });

});
```
You'll want to update the "1" in "#input_1" to the ID of your user-defined price field and the "8" in "gformCalculateTotalPrice(8);" to the ID of your form.

I'd recommend including this in your theme's JS file; however, there are other options if you need. :)
Posted 12 years ago on Thursday September 6, 2012 | Permalink
Shelly
Member
Awesome! Thanks so much! Worked like a charm. I only made *one* teensy little edit - because they have a couple of forms (and a couple of fields within each form) they want to do this on, I changed it *slightly* to look for an input class, instead of an ID. So any input field that has the class of "realtime" will work the magic:
```
$('.realtime').keyup(function() {	  // input class to apply to
        gformCalculateTotalPrice(6);   // form ID to apply to
    });
```
Already had a global JS file, so I just popped that right in there, and it works like a charm. Thanks again (I'm getting better at jQuery/AJAX, but I'm still not very good at it! So I appreciate the help!)
Posted 12 years ago on Friday September 7, 2012 | Permalink
Chris Hajer
Key Master

Thanks for sharing your experience, as always, Shelly.

Posted 12 years ago on Friday September 7, 2012 | Permalink

This topic has been resolved and has been closed to new replies.