1

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.

Bill Osuch
  • 408
  • 4
  • 17
  • Loading your page, I get a `jQuery(...).tabs is not a function`. That is because jquery-ui does not seem to be loaded. -- Looking a bit further, you are loading jquery in the `#customFooter`... It should be loaded in the `` before any other .js file that would require it.... Like `jquery-qtip` for example. – Louys Patrice Bessette Jan 16 '21 at 21:40
  • It works the same whether it's in the header or footer, I moved it back to header. And the tabs error is generated from the base Infusionsoft form - it's there if my added code is removed, but the form still works properly. – Bill Osuch Jan 16 '21 at 21:44
  • ok... And if jQuery is not loaded at all and the script to change the `min` and `max` attributes is removed, everything works fine? – Louys Patrice Bessette Jan 16 '21 at 21:56
  • Yes, if I remove those 9 lines above, everything on the order form works fine (even though the console shows some errors and warnings) – Bill Osuch Jan 16 '21 at 22:10

2 Answers2

1

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>
Bill Osuch
  • 408
  • 4
  • 17
0

EDIT

I saw your edit...

I seems like the <input> is being replaced after an "update" click.

Try setting a timeout to also execute the function after an "update" click:

<script type="text/javascript">

function setMinMax(){
  jQuery("input[name=qty_1]").attr({
       "max" : 100,
       "min" : 15  
    });
}

jQuery(document).ready(function(){
  setMinMax();
  
  jquery(".updateCart").on("click", function(){
    setTimeout(function(){
      setMinMax();
    },500)
  })
  
});
</script>
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64