Close a bootstrap 5 modal after submit (if success) button

[robin01]

Hello All,

I’m trying to close the popup login window after a successful login, and its not working.

• the close button works.
• the flow, if login is successful the popup is closes automatically and if not it remains open for user correction

Bootstrap 5

Part of the Javascript that controls the login success/failure

        fetch ('api.php', {
            method: 'POST',
            body: formData1
        }).then(response => {
            return response.text()
        }).then(response => {        
           if (response === 'INVALIDauthentication') { 
                loginStatus.hidden = false;            	
        	} else {                
                loginStatus.hidden = true;
                // document.getElementById('loginModal').data-dismiss="modal";
               document.getElementById('loginModal').modal('hide');  
              **this is where I like to add code to hide the modal pupop**           	
        	}

part of the modal that i like closed if login success

<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frm_popupLogin">
                    <div class="alert alert-danger" role="alert" id="popUPloginErrorStatus" hidden="hidden"></div>
                    <div class="mb-3">
                        <label for="email-address" class="col-form-label">Email Address</label>
                        <input type="text" name="inpEmail" class="form-control" id="email-address">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="col-form-label">Password:</label>
                        <input type="password" name="inpPwd" class="form-control" id="password">
                    </div>

                    <div class="modal-footer">                        
                        <button type="button" class="btn btn-primary" id="btn_popUPlogin">Login</button>                       
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>

[Martyr2]

So I am assuming you are setting up the modal by using something like this?

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options);

Here you are saying that the element id myModal is being used to setup a bootstrap.Modal object. If this is the case, you should then be able to simply call hide() directly on this object.

myModal.hide();

You might also be able to try out myModal.dispose() too.

Reference link below. Check out “Via JavaScript” heading…

Modal

[dennisjn]

As the login modal is only ever used once at the start, just set it’s innerHTML to an empty string which will remove it from the DOM.

document.getElementById("loginModal").innerHTML = "";