jqueryinfusionsoft

Small jQuery function kills other functions on Infusionsoft order form


I'm a total jQuery novice. I'm trying to modify an Infusionsoft order form, to add a minimum value to the quantity input box. With the order form, you can't modify any of the actual code on the page (it's auto-generated), but you can add your own script to the footer.

I found this to add a max and min quantity to an input field:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(".qtyField").attr({
       "max" : 100,
       "min" : 15  
    });
     });
</script>

It works, but if I click the Update button to update the total price (based on the quantity selected), I'm seeing this error in the console:

Uncaught TypeError: Infusion.Ecomm.OrderForms.ajaxSubmitForm is not a function
    at <anonymous>:1:27

...so I'm guessing adding the script source is overriding whatever they are using. But again, I know next to nothing about jQuery.

The order form is here: https://mb931.infusionsoft.app/app/orderForms/ASR-For-Business-Single-License

UPDATE: I was able to sort of get it working with this code:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("input[name=qty_1]").attr({
       "max" : 100,
       "min" : 15  
    });
});
</script>

That sets the minimum quantity properly, and if I increase it and hit Update the amount is updated properly. BUT, after I hit update, if I drop the quantity down, the minimum is no longer there, I can go below 15.


Solution

  • Here's what worked:

    <script type="text/javascript">
      function updateQuantity(){
        jQuery("input[name=qty_1]").attr('max', 100);
        jQuery("input[name=qty_1]").attr('min', 15);
      }
    jQuery(document).ready(function(){
      updateQuantity();
      jQuery(document).bind('DOMNodeInserted',updateQuantity);
    });
    </script>