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

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! 

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.

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