Programmatically control custom tabs after form submit

Here’s a quick video of me demonstrating how to programmatically control custom tabs after a form submit:

JavaScript (Remember to change component_ID to your component ID)

    data.ele.find('.form-submit button').click(function(){

Hi Chem,

Brilliant addition :smile:

I have followed your instructions to the letter (and removed the previous code of appending tabs) - I get a very quick flashup of a “404 Page Not Found” when the form is submitted as it returns to the table view.

My submit rule is set to “return to existing page” as if I set it to show confirmation message then I get the 404 as a permanent page.

I have carbon copied your code, just replacing the “table” with “tab”:

data.ele.find(’.form-submit button’).click(function(){


<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#tab1">Table</a></li>
<li class="tab col s3"><a href="#tab2">+ Record</a></li>
<div id="tab1" class="col s12">&nbsp;</div>
<div id="tab2" class="col s12">&nbsp;</div>

Hi Chem,

I have found a curve ball - hopefully your magic will work around it?

If you have a connection on the form being submitted and you allow for that forms connections to have a “add new” popup - that triggers the JS to act before the proper form is complete:

Hey @Roger

Removing the hash from the app URL fixes your first issue.

For the second issue, changing the JS to the following will fix the issue. For context, #x_element_page_115_6 is the element ID of the form.

    $('#x_element_page_115_6').find('.form-submit button').click(function(){
1 Like

Excellent work Tim, works a treat - thank you as always

Hey Tim,
Found a glitch - can it be worked around?

If a user misses a compulsory field and still clicks “submit” then the page switches from the form to the table and the error/warning message is missed. You only realise when you see no entry in the table and go back to look at the form.