Jump to content

Call a function by submitting a form and show the result in post-submit message

Recommended Posts

Hi!

I have a function in my footer, which looks like that:

<script>
  function rolls() {
    var totalrolls = Math.ceil(((document.input.input2.value -0) + 53) * (document.input.input1.value -0) / 50000) ;
    document.getElementById('txtrolls').innerText=totalrolls;  
  }
</script>

Then I want to set up a form using Squarespace form block (in lightbox mode) to collect "input1" and "input2" as input fields, and upon submission of the form, call the function "rolls()" and show the value "totalrolls" in the post submit message.

I name the Form Fields "input 1" and "input 2", but how to call "rolls()" upon submission? Or should I call the function in the Post-Submit HTML and show the value there as well?

I don't have it on my website yet (so no link to show) as I am not sure if this is feasible and how..

Thanks for your help! 

Link to comment
  • Replies 3
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

The difficulty is that Squarespace will load everything immediately on render, this means it will also run the script you've shown above. If you're familiar with JS you can try to disable AJAX loading. In my opinion, the result of doing so is almost worse than if you left it on.  The simplest solution is to avoid relying on inputs or interactions to fire an event, especially if we have no control over it.

Similarly, because we have no control over the Form script, it'd be safe to assume we also can't adjust that code at that level either. I'd suggest building the 'webapp' yourself, if you're comfortable, or seeing if there's a third-party widget that you can use.

 

Link to comment

Thanks @Wolfsilon!

Is there a code to show a simple Lightbox popup that would look like the Squarespace form? As such I could do my own form and run the calculation above.

I find expansive plugins doing stuff I don't need or the jQuery lightbox plugin. But is it possible to replicate the Form lightbox with a simple code?

Many thanks

Link to comment
  • 8 months later...

You can do that with custom code.

To run JavaScript after a Squarespace form was submitted you can check the below video and here are the codes https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms

 

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.