Refresh form after submission without reloading the page

I have added a very simple form block to a page of my site. The form only has one field — to enter a simple text message — with a "submit" button.

I'm looking for a solution that allows users to type a message, submit the form, and after submit the form auto-refreshes without having to reload the page. Basically, I need users to be able to submit the form multiple times without reloading the page. Is this possible?

Thank you for your help!

This method would refresh the page, but automatically rather than a manual refresh (if this isn't what you want please feel empowered to ignore this!)

If you set the post-submit URL as the same page the form is on, when you click submit it will send, then refresh the page and form allowing someone to submit multiple messages.

Thank you for the response, Ziggy — Unfortunately that wont work for me. There will be a live stream on the page (via embedded Vimeo), and we need to have a one-way submission form for the viewers to send notes to the live stream performer. 

So, we need a way for them to be able to submit multiple messages without the page reloading. 

@tuanphan You have been really helpful in the past. Are you aware of a solution to this problem? Thank you!

Can you share link to page where you use form?

Hi @tuanphan! Thank you for your response, and appologies for the slow reply (I didn't see a notification).

Here is the page where the form is: https://joyrx.squarespace.com/livestream-live

Thank you for your help!

Checking in @tuanphan. Do you think this is something you can help me with? Thank you!

On 8/14/2024 at 11:04 PM, FortWest said:

Checking in @tuanphan. Do you think this is something you can help me with? Thank you!

 

Sorry, did it some days but forgot your thread url to give code

You can use this code to Website Tools > Code Injection > Footer

<script>
  $('button[type=submit]').on('click', function () {
  checkSubmitSuccess($(this).parent().parent())
});

function checkSubmitSuccess(formElement) {
	console.log(formElement)
  var i = 0;
  while (i < 10) {
    (function (i) {
      setTimeout(function () {
        if ($(formElement).hasClass("react-form-contents--submitted")) {
        	console.log("Hereee")
          i = 10
          window.location.reload()
        }
      }, 1000 * i)
    })(i++)
  }
}
</script>

Thank you, @tuanphan! I've put this into the footer (see screenshot), but it doesn't appear to be working for me. Does this look right to you? Looks like there may be a syntax error, but I'm not sure how to fix it.

Here is the live page: https://www.joyrx.org/livestream-live

Thank you very much for your help!

you could simply set the value of the input field to nothing every time the submission is made.

This would potentially require a custom text field instead of the squarespace form, or you could use event.preventdefault, to stop the initial submission and then add your own submit logic.

@tuanphan Wondering if you would be able to help? Thank you so much!