Form Submit > Hide Form and Show Details Components

Hi Tada Community-

The great Peeps at Tada have helped me with some dynamic page loading with some Javascript API script. The application I build has a Form Component and a Details Component on the same page. I wanted a person to submit a form and then reload the page to hide the form and show the details component. The “trigger” was a data field on the page and if it showed different selections. The below example was if it showed “Submitted by Logistics”.

Below is the JS script that worked:

TB.render('component_11',function(data){
    var currentStatus = data.record.field_406;
    if(currentStatus !== 'Submitted to Logistics'){
        TB.hideComponent('component_23');// any code here will run when current status is not     'Submitted to Logistics'
    } else {
        TB.hideComponent('component_26');// any code here will run when current status is 'Submitted to     Logistics'
    }
});
TB.render('component_23',function(data){ // Wait for form to load
    data.ele.find('.form-submit button').click(function(){ // Find the submit button and add a click event
        location.reload(); // Reload the page
    }); // End Click event
}); // End TB.render function

Instructions:
component_XX = ID of component of form, details page, and the trigger field that the script will “check” to run. Change the IDs to whatever your page shows.
Submitted to Logistics = trigger text to run the script. Change to exact text of the option you desire to run the javascript.
field_406 = data field ID on the page to trigger the script to run. Change field ID to whatever your page shows.

Put the script in the page’s Javascript tab in Page Builder.

Hope this helps

1 Like