Jquery is not working well in forms as it worked before the forms update made in May.

Hello everyone, 

In our site we had some code injected that was taking some data of the forms and then making a custom behavior with it. I was working perfectly until the last update that SquareSpace made to the forms in May. After that it works no longer. Here are some examples of the Jquery selectors that stated to fail:

$('input[type=submit]').on('click', function (e) {

  var redirect = $('form').data('success-redirect');
  var email = $('input[type=email]').val();
  var language = $('select').val();
  
});


function disableButton() {
   $(':input[type="submit"]').prop('disabled', true);
}

$("select").change(function(){
        $(this).find("option:selected").each(function(){
		
        });
});

All of them are used inside the $(document).ready(function(){ } );

Do you know if SquareSpace put some kind of blocks for the use of Jquery in the forms? Or it has to be used in a specific way ?

52 minutes ago, pablo98 said:

Hello everyone, 

In our site we had some code injected that was taking some data of the forms and then making a custom behavior with it. I was working perfectly until the last update that SquareSpace made to the forms in May. After that it works no longer. Here are some examples of the Jquery selectors that stated to fail:

 

$('input[type=submit]').on('click', function (e) {

  var redirect = $('form').data('success-redirect');
  var email = $('input[type=email]').val();
  var language = $('select').val();
  
});


function disableButton() {
   $(':input[type="submit"]').prop('disabled', true);
}

$("select").change(function(){
        $(this).find("option:selected").each(function(){
		
        });
});

All of them are used inside the $(document).ready(function(){ } );

 

Do you know if SquareSpace put some kind of blocks for the use of Jquery in the forms? Or it has to be used in a specific way ?

 

Could you share the current page with the code?

@Beyondspace Here is the link :

https://triangle-lilac-xypn.squarespace.com/contact-1  the password is 123456.

Here is the javascript code. The only thing that works is the document ready function and this console.log(" document ready .... ");

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>



<script type="text/javascript">
	 $(document).ready(function () {
       console.log("Document ready...");
  	   $(':input[type="submit"]').prop('disabled', true);
       $("#section-d3ff18c1-5716-429b-95cc-95dc2270de88").hide();
       
      $('#number-a85ab0aa-713a-4077-8144-f8e7abbb3f3b-field').on('input',function(e){
    	console.log("JQUERY ",$(this).val());
        console.log("JQUERY ",$(this).val().length);
        
        
        
        if($(this).val().length>=3){
          $("#section-d3ff18c1-5716-429b-95cc-95dc2270de88").show();          
        }
	});
       
   });
</script>

The problem is that the .hide(), .show(), .on(), .prop() or any other method from Jquery isn't working. Are those method bloked with the new update in the forms ??

There is plenty of changes in SQS form that may messed up your code's selectors, I may have come up with a version with no jQuery dependant and with improved selectors

<script>
window.onload = function() {
    console.log("Document ready...");
    var submitButton = document.querySelector('[type="submit"]');
    submitButton.disabled = true;

    var sectionElement = document.querySelector("#section-d3ff18c1-5716-429b-95cc-95dc2270de88");
    sectionElement.style.display = "none";

    var numberInput = document.querySelector("#number-a85ab0aa-713a-4077-8144-f8e7abbb3f3b input");
    numberInput.addEventListener('input', function(event) {
      console.log("VANILLA JS ", event.target.value);
      console.log("VANILLA JS ", event.target.value.length);

      if (event.target.value.length >= 3) {
        sectionElement.style.display = "block";
      }
    });
};

</script>