Bonjour à tous,

Comme le titre l'indique (même si il est un peu barbare !) j'ai un petit souci pour la "soumission" de mon formulaire qui est intégré dans une fenêtre modal.

En effet, il n'est pas pris en compte...

Je m'explique :

J'ai crée une fenêtre modal (entièrement en javascript, je n'utilise pas les modal de bootstrap) qui s'ouvre au click d'un lien.

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

Dans cette fenêtre modal, comme vous pouvez le constatez, j'ai un formulaire "form" avec "POST" en method.

Voici le javascript associé pour la modal :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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);
})
D'après mes recherches, j'ai également fait ceci :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let formCnx = document.querySelector('#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));
})
afin d'essayer de soumettre le formulaire...

Malheureusement, rien ne fonctionne...

Il faut savoir également que lorsque je place le formulaire hors de la modal, cad en enlevant juste ceci :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="modalConnexion" class="modal" aria-hidden="false" role="dialog" aria-labelledby="titleModal" style="display: none;">

le formulaire est bien pris en compte et j'arrive a me connecter.

J'en ai donc déduis que cela venait bien de la modal mais malheureusement impossible de trouver des infos potable. Tout ce que j'ai trouvé est en JQuery et je ne veux pas l'utiliser (pcq je ne connais pas et que je préfère faire tout en JS)

Donc si vous avez des pistes, je serais fortement preneur...

Un grand merci a vous...