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.
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>