form submit post modal

**Black-k-fee** · 12/04/2019, 21h09

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

**Loralina** · 13/04/2019, 09h44

Bonjour,
Quelques affichages suffisent souvent à identifier les problèmes.
Exemple ici :
- Je copie-colle vos trois codes.
- J'ajoute un lien pour afficher le formulaire.
- Je mets des console.log un peu au hasard en début de fonctions.
- J'obtiens ce code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<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>
<a class="js-modal" href="#modalConnexion">Afficher formulaire</a>
<script>
let modal = null;
 
const openModal = function (e) {
console.log(1);
    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) {
console.log(2);
    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.querySelector('#formCnx');
formCnx.addEventListener('submit', (e) => {
console.log(3);
    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));
})
</script>

- Je clique sur le lien, le formulaire s'affiche : le console.log(1) s'exécute.
- Je remplis, je valide : le console.log(2) s'exécute, mais pas le troisième.
- Je désactive le code après le console.log(2) en mettant un return;.
- Je teste : le console.log(3) s'exécute et le formulaire est envoyé.
- Je déplace le return; progressivement : après le if, ça fonctionne de nouveau, ensuite je le mets après e.preventDefault(); et je constate que cela ne fonctionne plus.

Donc e.preventDefault(); empêche la soumission du formulaire.

**Black-k-fee** · 13/04/2019, 14h53

Salut,

Merci beaucoup, ça fonctionne bien effectivement.... Je t'avoue, je n'avais pas penser à ça...

Bref... ça fonctionne très bien...

Mais pour le coup, j'avais trouvé une autre solution qui fonctionnait très bien aussi en jouant principalement sur le css des div...

Je vais tester quel solution est la plus optimisée pour utiliser le moins de ressource possible...

Mais merci encore !

**Black-k-fee** · 13/04/2019, 15h03

Et après différent test, je me rends compte que je n'ai même pas besoin de cette partie là :

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.getElementById('formCnx');
formCnx.addEventListener('submit', (e) => {
 
    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));
})

Pas trop compris pourquoi d'ailleurs...

**Loralina** · 13/04/2019, 20h05

Bonsoir,

Envoyé par Black-k-fee

Et après différent test, je me rends compte que je n'ai même pas besoin de cette partie là :

- Sans cette partie, on reste sur le fonctionnement de base du formulaire :
Quand on clique sur le bouton de soumission, <input type="submit"..., les données du formulaire sont automatiquement envoyées en POST à "index.php", pas besoin de javascript pour ça.
Cela s'accompagne d'un changement d'URL (ou d'un rechargement si on était déjà sur "index.php").

- Avec cette partie :
Ici : formCnx.addEventListener('submit', (e) => {...});, on demande que la fonction fléchée (e) => {...} soit exécutée quand surviendra la soumission du formulaire.
Ainsi, quand on clique sur le bouton de soumission, cette fonction s'exécute.

Si je reprends le code initial, on commençait par : e.preventDefault();.
A cet endroit, cette instruction est nécessaire (contrairement à celle qui était dans l'autre fonction) :
Elle indique qu'il ne faut pas soumettre le formulaire.
En effet, le reste de la fonction se charge d'envoyer les données du formulaire d'une autre manière, une différence étant qu'on reste sur la page en cours.
Mais si e.preventDefault(); est retiré, alors le formulaire sera soumis automatiquement avec un changement d'url, d'où l'impression que ça fonctionne pareillement avec ou sans cette partie de code.

**Black-k-fee** · 13/04/2019, 20h58

Bonsoir,

Merci, c'est "un peu" plus clair...

Je m'en sors pas trop mal en javascript, pas trop mal en PHP, mais dès qu'il s'agit de mélanger les deux, j'avoue que j'ai un peu plus de mal...

form submit post modal

JavaScript

Discussions similaires

Partager

Partager