Refresh entire page after form is submitted

This has been requested so I’ll share some JavaScript code you can use below.

But first, you’ll need to find your component ID.

Change the component_ID in the code to your forms component ID.

TB.render('component_ID', function(data) {
  	data.ele.find('.af-form-submit').on('click',function(){
        location.reload();
  	});
});

6 Likes

Hey @Chem,

I’m using this code on a page and I have additional Javascript that hides the component if a criterion is met but when I submit the form and the page refreshes it doesn’t refresh the Javascript that is supposed to hide the component. If I hit the browser refresh button the component hides as intended.

Am I missing something here?

This is awesome, thanks @Chem!

Hi @Chem,

Can this be used with an action button in a details component?

Alex

1 Like

Works great if you are uploading a file. It’ll update all text fields but not a file / attachment field. How can we refresh after form has submitted files as well. I’d be ok redirecting to the same page or using a custom URL but they do not reload the page if you specify the same page.

1 Like

Hi avralex,

I was able to use this script:

TB.render('component_ID', function(data) {
  	data.ele.find('.td-data-link').on('click',function(){
        location.reload();
  	});
});

Just manage to change the component_ID

2 Likes

This is great for form submissions without error. However, when a form is submitted with an error, the page reloads too fast to see the error. It looks like the form was submitted successfully. Would it be possible to make a “pause” before the reload?

I tried to add this:
setTimeout(function () {
location.reload(true); //MODIFICATION
}, 5000);

But then the page kept reloading every 5 seconds…

How should I do it correctly?

Hey @ivan,

you can use the following code

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}
TB.render('component_ID', function(data) {
  	data.ele.find('.af-form-submit').on('click',function(){
  	    wait(5000);
        location.reload();
  	});
});

The code:

TB.render('component_6', function(data) {
  	data.ele.find('.td-data-link').on('click',function(){
        location.reload();
  	});
});

Seems to break the page for me. I’m trying to use this on a data table action button. After adding the javascript the page refuses to load.

Hey @Chem

Your code using the wait function worked marvelously, but the user never sees the whether the form was successfully saved. Is there a way to reload only if the form submission was successful?

This might apply. Look at the last post. Add a close modal/popup option with the submit rules.

Hi Tadabase - I am new to javascript. I am able to refresh the entire page upon form submission and clicking an action link. However, I am not able to do so with the Task Button. Is there a special trick besides changing the component ID? Thank you

@Chem

Hey Chem, I know this functionality is a plugin now but I was wondering if you could help me an oversite in the plugin.

Currently, if you use the “Form Submission Page Refresh” plugin it works quite well until there is a required field on the form that wasn’t filled out and the form is a table popup form. The result is the form doesn’t submit and the page refreshes which leads the user to believe it was submitted.

Is there a way to add some code to the form refresh that checks if the validation alert has been triggered and if it has, don’t refresh the page?