Custom jquery added to order form causing issues - help

I’ve added the following code to an order form. When I add an address the form goes into a state of loading and never stops. Here’s the code and a short video showing what happens.


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
		$('form input[id="firstName"]').attr("readonly", true);
      $('form input[id="firstName"]').css('background-color' , '#DEDEDE');
        $('form input[id="lastName"]').attr("readonly", true);
      $('form input[id="lastName"]').css('background-color' , '#DEDEDE');
        $('form input[id="emailAddress"]').attr("readonly", true);
      $('form input[id="emailAddress"]').css('background-color' , '#DEDEDE');
    });
</script>

video: https://www.useloom.com/share/1498dbc067ee4d098b52141bd307fcfe
form link: https://ap216.infusionsoft.com/app/orderForms/TEST-FLEMING

Thanks!

Hi Mike,

It seems like there’s some kind of conflict with some default cart scripting.

Try jquery no conflict, it worked for me when running in the browser, so hopefully it works for you.

What we’re trying to do here is set j to call jquery instead of $ preventing problems. You can replace j if you like.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var j = jQuery.noConflict();
    j(document).ready(function(){
		j('form input[id="firstName"]').attr("readonly", true);
      j('form input[id="firstName"]').css('background-color' , '#DEDEDE');
        j('form input[id="lastName"]').attr("readonly", true);
      j('form input[id="lastName"]').css('background-color' , '#DEDEDE');
        j('form input[id="emailAddress"]').attr("readonly", true);
      j('form input[id="emailAddress"]').css('background-color' , '#DEDEDE');
    });
</script>
1 Like

Hi @mjfleming,

Change your $ selector to jQuery and you should work fine. You don’t need to psuedo it.

1 Like

Thank you all for the help. This worked great!