0

I'm helping with a Squarespace site and it has a custom form added in code on a particular page. The form collects the payer's info, then can enter any amount in the "Total to charge" field, then it is supposed to display the 2.7% fee. However, I can ONLY get the fee to display if I refresh the page (chrome, safari, either one). Click here to see the page...let me know

here is a snippet of code:

<script>
    $(document).ready(function () {
        var $amount = $('input[name="amount_1"]');
        var $fee = $("#fee");
        var $total = $("#total");
        var $amount_2 = $("input[name='amount_2']");
        var processing_fee = .027;
        var isCurrency = function (inval) {
            var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;
            if (regex.test(inval)) {
                return true;
            }
            return false;
        };
        $amount.on('input propertychange', function () {

            if (isCurrency($amount.val())) {
                var fee = ($amount.val() * processing_fee).toFixed(2);
                var total = (Number(fee) + Number($amount.val())).toFixed(2);
                $fee.text('$' + fee);
                $amount_2.val(fee);
                $total.text('$' + total);
            }
        });
        $amount.on('blur', function () {
            $amount.val($amount.val().replace("$", ""));
            $amount.val(Number($amount.val()).toFixed(2));
            if (!isCurrency($amount.val())) {
                $amount.val("");
            }
        });
        $("#paymentform").validate({
            submitHandler: function (form) {
                form.submit();
            }
        });
    });
</script>
Brandon
  • 3,572
  • 2
  • 12
  • 27
Tess
  • 1
  • 1

1 Answers1

0

When a custom script only runs on page refresh, the cause is likely to be Squarespace's AJAX loading:

Occasionally, Ajax may conflict with embedded custom code or anchor links. Ajax can also interfere with site analytics, logging hits on the first page only.

Disabling AJAX is often a simple solution:

You can disable Ajax in the Style Editor, with some exceptions:

  • Ajax can't be disabled in Skye, Foundry, or Tudor.
  • Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they will still use Ajax to load the Blog Page.

To enable or disable Ajax:

  • In the Home Menu, click Design, and then click Style Editor.
  • Scroll down to Site: Loading.
  • Check or uncheck Enable Ajax Loading.

If you do not want to disable AJAX, then see "Option 2" here for how to write your code so that it will work on initial page load and on AJAX page loads.

Brandon
  • 3,572
  • 2
  • 12
  • 27
  • Brandon, I can't thank you enough! I'm am not familiar with AJAX, so I guess that's something I learn a little better. This was exactly my issue. Thank you so so much! – Tess Aug 06 '20 at 20:33
  • @Tess, glad to hear it. Please don't forget to accept/upvote correct answers here on StackOverflow. – Brandon Aug 07 '20 at 15:36