1

El modal contiene un formulario, la idea es que al enviar el formulario y una vez tenga el contenido del mismo el modal se cierre.

<div id="welcomeModal" class="modal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Gestor de gastos</h5>
        </div>
        <div class="modal-body pt-5 px-1 text-center">
          <div class="display-2">Bienvenido!</div>
          <p class="fs-4">Antes de empezar define el nombre de tu cuenta princial.</p>
          <form>
            <div class="mt-5 mx-5">
                <input type="text" id="princialAccountName" class="form-control" id="principalAccount" aria-describedby="help" placeholder="Nombre de tu cuenta principal." required>
                <div id="help" class="form-text text-start">Este nombre solo es una referencia a la cuenta bancaria verdadera.</div>
            </div>
            <button type="submit" class="btn btn-warning mt-4">Ingresar</button>
          </form>
        </div>
      </div>
    </div>
  </div>

Javascript:

const manager = new Manager()

let welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'), { keyboard: false })
welcomeModal.show()

const welcomModalElement = document.getElementById('welcomeModal')
welcomModalElement.addEventListener('submit', (e) => {
    e.preventDefault()
    const princialAccountName = document.getElementById('princialAccountName').value
    if (!princialAccountName) {
        manager.logAccount(princialAccountName)
        // En este momento tendria que cerrar el modal
        welcomModalElement.innerHTML = ''
        document.body.removeChild(welcomModalElement)
    }
})

Como ya dije antes necesito que el modal se cierre luego de obtener el valor de princialAccountName y pasarselo a la clase manager, pero no me estaria funcionando.

Tambien prove con el metodo que provee el mismo bootstrap, pero tampoco me da resultados.

const manager = new Manager()

let welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'), { keyboard: false })
welcomeModal.show()
const welcomModalElement = document.getElementById('welcomeModal')
welcomModalElement.addEventListener('submit', (e) => {
    e.preventDefault()
    const princialAccountName = document.getElementById('princialAccountName').value
    if (!princialAccountName) {
        manager.logAccount(princialAccountName)
        // Metodos de bootstrap
        welcomeModal.hide()
        welcomeModal.dispose()
    }
})

Documentacion de bootstrap 5 que estube usando.

2
  • Mira esto a ver si te funciona Oculta elemento HTML
    – JoseMgz_Ux
    el 16 dic. 2022 a las 13:58
  • Muchas gracias por el dato, pero no, tampoco funciona.
    – C.Mirkin
    el 19 dic. 2022 a las 13:01

1 respuesta 1

1

El problema esta en la condicional.

let welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'), { keyboard: false })
welcomeModal.show()
const welcomModalElement = document.getElementById('welcomeModal')
welcomModalElement.addEventListener('submit', (e) => {
    e.preventDefault()
    // Aqui esta el texto del formulario
    const principalAccountName = document.getElementById('princialAccountName').value
    // Se valida si es un string vacio o uno lleno
    if (!principalAccountName) {
        manager.logAccount(principalAccountName)         
        welcomeModal.hide()
    }
})

El problema es que:

!'lepiz' = falce

!' ' = true

Entonces para que funcione la condicion deberia ser así:

if (!!principalAccountName) {
        manager.logAccount(principalAccountName)         
        welcomeModal.hide()
}

En conclucion. El modal nunca se cerraba porque nunca se llegaba a esa parte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.