Ubuntu-fr

Black-K-fee

[JAVASCRIPT] Probleme soumission formulaire dans une modal

Bonsoir à tous...

Je sais pas trop si c'est adéquat de poster ici mais je tente...

Je rencontre un petit (gros) souci qui me bloque ! Je vous explique...

J'ai un formulaire qui est dans une fenêtre modal qui apparaît au click sur un lien.

Voici le code pour la modal :

<div id="modalConnexion" class="modal" aria-hidden="false" role="dialog" aria-labelledby="titleModal" style="display: none;">

        <div class="modal-wrapper js-modal-stop">
            <h2 id="titleModal">Ajouter Resa</h2>
            <form id="formCnx" name="formCnx" method="post" action="index.php">
                <div class="label-modal">
                    <label for="name">Votre pseudo :</label>
                    <input name="log" size="10" maxlength="10" required="required" />
                </div>
                <div class="label-modal">
                    <label for="name">Mot de passe :</label>
                    <input type="password" name="mdp" size="10" maxlength="10" required="required" />
                </div>

                <div class="button-modal">

                    <input name="submitCnx" type="submit" value="Connexion" class="js-close-modal" />
                </div>
            </form>
        </div>
    </div>

 

Ainsi que le javascript associé :

let modal = null;

const openModal = function (e) {
    e.preventDefault();
    const target = document.querySelector(e.target.getAttribute('href'));
    target.style.display = null;
    target.removeAttribute('aria-hidden');
    target.setAttribute('aria-modal', true);
    modal = target;
    modal.addEventListener('click', closeModal);
    modal.querySelector('.js-close-modal').addEventListener('click', closeModal);
    modal.querySelector('.js-modal-stop').addEventListener('click', stopPropagation);
}

const closeModal = function (e) {
    if (modal === null) return;
    e.preventDefault();
    modal.style.display = "none";
    modal.setAttribute('aria-hidden', 'true');
    modal.removeAttribute('aria-modal');
    modal.removeEventListener('click', closeModal);
    modal.querySelector('.js-close-modal').removeEventListener('click', closeModal);
    modal.querySelector('.js-modal-stop').removeEventListener('click', stopPropagation);
    modal = null;
}

const stopPropagation = function (e) {
    e.stopPropagation();
}

document.querySelectorAll(".js-modal").forEach(a => {
    a.addEventListener('click', openModal);
})

let formCnx = document.getElementById('formCnx');
formCnx.addEventListener('submit', (e) => {
    e.preventDefault();
    let fd = new FormData(formCnx);
    let init = {
        method: 'post',
        body: fd
    };
    fetch('index.php', init)
        .then(response => {
            if (!response.ok)
                return new Promise((resolve, reject) =>
                    reject(new Error("Invalid response")));
            console.log("enregistré en base/formulaire envoyé");
                
        })
        .catch(error => console.error(error));
})

Mon souci est que et bien le formulaire n'est pas pris en compte dans mon "filter_input" en php...

A note que lorsque j'enlève cette div :

    <div id="modalConnexion" class="modal" aria-hidden="false" role="dialog" aria-labelledby="titleModal" style="display: none;">

et que j'affiche le formulaire hors d'une modal, celui-ci fonctionne correctement, ce qui enlève les problèmes de connexion a ma BdD...

Je n'arrive pas trouver d'infos sans que ça me parle de JQuery et bootstrap, hors je veux pas utiliser ni l'un ni l'autre pour faire ça...

Si vous avez des pistes, je suis largement preneur... (Surtout que j'ai deux, trois formulaire dans des modals donc ça va bien me servir...)

Merci d'avance à vous...

---

https://bookingnotebook.com