1

I'm updating the amount of a PayPal button with a variable amount. I'm getting the amount like this:

<input type="hidden" name="amount" value="" />

var amount = document.querySelector('.total-box > span').innerText;
var hidden = document.querySelector("input[name='amount']");
hidden.value = amount;
console.log(hidden.value);

That amount updates .total-box > span when paypal fees are added to the total.

Therfore I need the console log(hidden.value) to update as well so it updates the PayPal amount field. Currently console log(hidden.value) is only running one time on page load, and doesn't update or get passed to PayPal.

Here is a JSFiddle to better explain what is going on. Any help would be appreciated.

daugaard47
  • 1,726
  • 5
  • 39
  • 74
  • 1
    You already have a function called `update`, and this function is called exactly when you need it, and it already calculates the amount you're looking for. All you need to do is also set the hidden field's value to the calculated sum, right in your `update` function. https://jsfiddle.net/khrismuc/3x3bv3j6/53/ (your code is also a pretty weird mix of vanilla js and jquery. and don't use ``s for output) –  Mar 21 '18 at 18:07
  • @ChrisG ah thank you very much, Very new to JS and pretty much pieced it all together from different tutorials. If you want to add that line as your answer I and mark it correct. – daugaard47 Mar 21 '18 at 18:14
  • 1
    Here's a cleaned up version: https://jsfiddle.net/khrismuc/mk2v4so4/ –  Mar 21 '18 at 18:32
  • @ChrisG Oh wow thank you! That looks so much cleaner. The only thing I noticed is the check box doesn't toggle the amount? I can try to figure that out. Really appreciate the help. – daugaard47 Mar 21 '18 at 19:02
  • Got it to update: Added the: `[].forEach.call(document.querySelectorAll('input'), function() { this.addEventListener('input', update); this.addEventListener('change', update); });` To the bottom. – daugaard47 Mar 21 '18 at 19:13
  • 1
    It sure does, at least for me. Check line 15 of the fiddle's JS. Updated the listener to use the `change` event though (but it did work with `input` on Firefox) –  Mar 21 '18 at 19:17
  • Looks like this worked on line 15 and 16: `$goal.on('input', update); ///// $giftFee.on('change', update);` Submit your answer and I'll mark it correct. Thank you again. – daugaard47 Mar 21 '18 at 19:30
  • 1
    You would have to completely rewrite your question, and I would have to compose a lengthy text to accompany my code which would in essence constitute a JS form handling primer. This question is unlikely to help anybody else and OT for stack overflow anyway. I'm glad I could help but let's leave it at that :) –  Mar 21 '18 at 19:33

0 Answers0