Close Popup Modal Upon Form Submit

Showcase Tips and Tricks
1

Greetings all-

Here is some JS that can be used to close a popup modal after a form is submitted on the modal:

Step 1
Add a unique ID for the Form’s Submit Rule confirmation messages Source Code.

For example, I’ll be adding the ID form-submitted to be used in the JavaScript code later on.

<p id="form-submitted">Form successfully submitted.</p>

Step 2

Find the form’s component ID.

For example, in this example, the component is component_3. This will be used as well in the JavaScript code below.

var submitRuleConfirmationId = 'form-submitted';
var componentId = 'component_3';

var formFinished = false;
function checkIfFormFinishedSubmitting() {
    if (formFinished === false) {
        if ($('#' + submitRuleConfirmationId).length) {
            formFinished = true;
        }
        window.setTimeout(checkIfFormFinishedSubmitting, 100);
    } else {
        // Simulate clicking the modal's close button
        $('div[uib-modal-window]').find('button.btn-danger').click();
    }
}

TB.render(componentId, function(data) {
    data.ele.find('.af-form-submit:not(.ng-hide)').click(function() {
        checkIfFormFinishedSubmitting();
    });
});

Change the component ID to the ID of the form.

This is a build from Chem’s old post at: Close Window on Submit Rule

Chem’s code closes the entire window/tab. The above will only close the modal. If anyone has a better code, please let me know and I can update the posting.

Cheers,
Adam

1 Like
2

Adam, there was an issue with validation rules in the past, if I recall correctly.
This code: is this with the running of the rules or without?

1 Like
3

Very helpful Adam! I just used this, appreciate the share!

1 Like