Jump to content

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

Go to solution Solved by creedon,

Recommended Posts

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 ?

 

Link to comment
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 - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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 ??

Link to comment
  • Solution
55 minutes ago, pablo98 said:

Are those method bloked with the new update in the forms ??

SS is not blocking jQuery or JavaScript.

The issue is that the current implementation of forms is much more complex than is used to be and they changed the backend of how forms are handled.

Try changing the following line...

$(document).ready(function () {

...to...

$( window ).on ( 'load', function ( ) {

As I say the new forms are complex and this fix won't solve all issues but it may help in this case.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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>

image.thumb.gif.82430340f1028fc2bdd3902510db3ec3.gif

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.