Stuck on OLX forms - am I trying to do too much!?!?

Hi


I have moved this forum post from the to the OLX Community in hopes of getting more product specific eyes & replies...


In harmony and inclusion,

Elizabeth

Blackbaud Community Team

Hi J KamaraFrederick‍. I like how you're approaching the flow for your donors. Hopefully the info I'm able to share will help a bit. 


First, and it might not save you any time at this point, there's a first class URL param you can use that will cause the selected gift amount to be set programmatically:


http://www.charity.org/donate?BBGiftAmount=100


will set the gift amount on the form to $100 if and only if $100 is one of the suggested gift amounts. We call these URL params "magic links" and you can see a bit about them on the last step of the form editor where you grab your form code snippet.


Using the above URL param, it doesn't matter how many suggested gift amount buttons you have on the form...as long as the value you set to this URL param matches one of the suggested amounts on your form, then when the form loads that amount will be selected.


Another handy URL param that works in conjunction with the one above is this one:


http://www.charity.org/donate?BBGiftAmount=100&BBHideOtherGifts=1


Setting this URL param to "1" will cause the form to hide the other suggested gift amount buttons. Again, this only works when using these URL params to set the gift amount to one of the suggested amounts you've configured on your form.


But these don't help with how you want to programmatically set gift amount to some other amount of the Donor's choosing. I could be wrong, but you may just need to set a class on the elements that capture the other gift amount on the form. It sounds like you're correctly setting the other amount but if you're not also programmatically "clicking the button", the form may be behaving as though the user hasn't made a choice of gift amount yet (even though a value has been programmatically entered into the Other Amount field). 


If you open up your browser dev tools console and watch the Other Amount elements as you manually click the Other Amount button, you'll see a few classes get added indicating that Other Amount has been selected. The <input> element gets the class BBFormRadioGivingLevelSelected and its associated label gets the class BBFormRadioLabelGivingLevelSelected. Try programmatically applying those classes when the donor has chosen an amount other than one of the suggested amounts and see if the form processes correctly for you.


Hopefully that helps some. Thanks and good luck!

Chris Martin

Blackbaud Product Management

 

Hi J KamaraFrederick‍. With a little local testing, the following seems to have worked and allowed the programmatically-set other amount to be passed in for payment processing. It maybe just calling the click() function on the right element? Also, I don't think you need to manipulate the value of the input with the ID = bboxdonation_hdnBBCheckoutAmount. The form's baked-in behavior should set that amount automatically (whether the donation amount is set by the donor or by your script).


Try this out:


document.getElementsByClassName("BBFormRadioDescriptionOther")[0].click()

document.getElementById("bboxdonation_gift_txtOtherAmountButtons").value = 55


Thanks!

Chris Martin

Blackbaud Product Management