简体   繁体   中英

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.

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM