Contenu | Rechercher | Menus

Annonce

T-shirt Disco Dingo : Série limitée

Ubuntu 19.04
T-shirt Ubuntu-FR « Disco Dingo » en série limitée !
Prix spécial pré-vente (15€) jusqu'au 21 avril 2019.

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 12/04/2019, à 20:47

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...

Hors ligne