Discussion :

[OUZFA]

Bonjour à tous,
j'ai 2 form (METHOD="POST" ACTION="#").

Un form est actionné par son <input type="submit"> .
Le deuxième est actionné à distance par un <button onclick="document.getElementById("myForm1").submit();"</button>.

Je souhaite éviter de recharger la page au submit pour les deux form.

J'ai essayé onsubmit="event.preventDefault" et aussi return false;

ça n'a pas marché (la page est tours rechargée par le submit.

Avez-vous une solution, svp ?

[casperweb]

Bonjour, preventDefault est une méthode pas une propriété. Il lui faut des parenthèses. soit event.preventDefault().
Lire https://developer.mozilla.org/fr/doc...preventDefault

Mais j'utiliserais plus un écouteur d'évènement écrit avec un addEventListener, du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
     const form = document.querySelector('form'); 
        form.addEventListener("submit", maFonction, false);
 
        function maFonction(event) {
            event.preventDefault();
           // Le reste du code
        }

C'est plus adaptable, et on peut réutiliser cela dans un fichier externe, ce qui respecte la séparation du HTML et du JS.

[OUZFA]

Merci casperweb

autant pour moi, j'ai oublié de mettre les parenthèses dans le message (je l'avais utilisé avec les parenthèse)

Par contre, j'ai essayé ta fonction, mais elle n'a pas résolu mon problème.

[OUZFA]

J'ai oublié de te dire que c'étaient des forms vers MySql.

[casperweb]

Par contre, j'ai essayé ta fonction, mais elle n'a pas résolu mon problème.

Quel est le code HTML du formulaire et le code JS que vous avez écrit?
Peut être faire un https://jsfiddle.net/ ou un https://codepen.io/ d'exemple.

[OUZFA]

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form id="form_raz_drapeau_changement" method="post" action="#" style="position: absolute;top: 230px;left: 80vw;height: 20px;width: 100px;">
<input type="text" id="drapeau_changement" name="drapeau_changement" value="true" style="" />
<input type="submit" name="submit_drapeau_changement" value="Commencer" >
</form>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="">
  const form = document.querySelector('form_raz_drapeau_changement'); 
        form.addEventListener("submit", maFonction, false);
 
        function maFonction(event) {
            event.preventDefault();
        }
</script>

[casperweb]

Bonsoir, Est-ce que vous développez avec la console JavaScript ouverte? Toujours regarder les messages d'erreurs dans la console.
J'ai ce message :

Uncaught TypeError: can't access property "addEventListener", form is null

Que vous auriez vu si vous aviez fait un console.log(form);

En fait la balise HTML nommée "form_raz_drapeau_changement" n'existe pas. Cela est un identifiant.
La methode querySelector() prend en paramètre un sélecteur CSS. En CSS un sélecteur d'identifiant commence par un #.
Soit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const form = document.querySelector('#form_raz_drapeau_changement');

Lire https://developer.mozilla.org/fr/doc.../querySelector

Et après le event.preventDefault(); il faut écrire le code de gestion des informations du formulaire.
PS : l'attribut type n'est plus nécessaire pour la balise <script>.

[OUZFA]

Bonsoir
Pardon de vous déranger encore

Je suis entièrement d'accord pour le # devant le querySelector. Par contre, qu'entendez vous par le code de gestion des informations du formulaire ?

[casperweb]

qu'entendez vous par le code de gestion des informations du formulaire ?

Le code JavaScript qui va traduire les réponses de l'utilisateur dans le champs "drapeau_changement" qui à pour valeur par défaut "true". (pourquoi "true" d’ailleurs).
Par gestion des informations du formulaire, j’entends le traitement des informations transmise par ce formulaire. En l'état le formulaire ne fait rien quand il est soumis.
Donc quel est le but de ce formulaire et quid de ce que rentre l'utilisateur comme données....

[OUZFA]

Le premier formulaire sert à envoyer une information drapeau_changement (true) dans une table MySql.
Cette information est récupérée en permanence.
Une fonction de compteur (30 secondes) est déclenchée lorsque le drapeau_changement est true
à la fin du compteur, le deuxième formulaire est actionné pour remettre le drapeau_changement à false dans MySql (update PHP)

[casperweb]

Merci pour cette réponse. Je n'ai rien compris au fonctionnement et à la raison d'être des deux formulaires. Sans doute parce que je manque d'information sur votre projet. Je ne sais pas de quoi il en retourne.
Si cela fonctionne comme vous voulez tant mieux, dans ce cas passer le sujet en résolu.
Sinon pourriez-vous détailler ce qui ne fonctionne pas.

[gabi7756]

Bonjour,
Pourquoi faire ca sous soumission du formulaire et pas juste du ajax ?

Comme ça tu setup un timer de 30 sec, et au rechargement de la page (si jamais l'utilisateur essaye de gruger) tu reload le temps restant. ( Par exemple en base stocké une datetime).
Comme ca quand tu recharges la page tu récupère la datetime et tu la compare à la date actuelle pour savoir combien de timer il reste.

Ca vaudrait peut être le coup que tu expliques le contexte, pas pourquoi tu fais comme ça, juste le contexte
Cdt

[Obsidian]

Bonjour,
Je ne sais pas si c'était implicite mais voici quelques pistes si jamais tu ne les avais pas déjà explorées :

Un form est actionné par son <input type="submit">

Je souhaite éviter de recharger la page au submit pour les deux form.

Si tu soumets le formulaire, tu effectues une requête de type « method » (donc GET ou POST) et de ce fait, tu effectues forcément un appel à une page. Le fait que cette page soit toujours la même est simplement dû au fait que tu as utilisé « # » comme URL (c'est-à-dire une adresse vide suivie d'une ancre « # », elle-même suivie d'aucun identifiant).

Si ce que tu veux faire, en revanche, est soumettre des données au serveur sans quitter la page (pour faire une application interactive côté client), il te faut écrire une fonction en Javascript qui va faire cette requête elle-même, soit avec du AJAX habituel, en utilisant XmlHttpRequest et et gérant toute la transaction, soit aujourd'hui en utilisant fetch(), qui simplifie beaucoup la chose mais qui demande malgré tout un peu de pratique. Et également de savoir manipuler des fonctions asynchrones.

Le deuxième est actionné à distance par un <button onclick="document.getElementById("myForm1").submit();"</button>

La méthode submit() d'un formulaire n'émet pas d'événement. C'est en fait le contraire qui se passe : lorsque l'on clique en temps normal sur un bouton submit, c'est le formulaire qui contient le bouton qui intercepte son clic. S'il peut constater qu'il s'agit bien d'un bouton de validation, il va mener quelques contrôles supplémentaires éventuels comme validateForm() puis, si tout est conforme, va émettre de lui-même un événement « submit » dûment renseigné qui va se propager par bubbling et être doté d'un comportement par défaut. C'est alors ce comportement par défaut qui va consister, pour le navigateur, à appeler la méthode .submit() du formulaire si lui non plus n'y voit rien à y redire.

Cela implique deux choses :

• Il est possible de placer le formulaire <form> au sein d'une balise parente qui intercepte l'événement submit, avant que le formulaire ne soit effectivement soumis ;
• Il est possible de soumettre directement le formulaire sans passer par un événement. Et heureusement, dans le cas présent, parce que cela pourrait conduire à des cas de réentrance et à une boucle infinie.

J'ai essayé onsubmit="event.preventDefault" et aussi return false;

En fait, les raccourcis « onquelquechose » ne sont appelés qu'à partir du moment où un objet Event est construit et émis, ne serait-ce que parce cet événement est transmis à la fonction via son premier paramètre à ou l'expression associée à travers la variable event. Et quand on utilise une expression (dans une chaîne de caractères entre guillemets), c'est généralement pour appeler une fonction, à laquelle on va justement passer event en paramètre si elle a besoin de ces informations.

Donc, ces raccourcis ne sont pas appelés s'il n'y a pas d'événement.

Ceci veut dire que cela va fonctionner avec ton premier bouton (le type="submit" ordinaire placé au sein de ton formulaire) mais pas avec le deuxième, qui appelle directement .submit et qui bypasse ainsi le processus habituel.

Est-ce qu'il y a moyen, dans ce cas, de demander au formulaire d'effectuer sa propre requête en soumission, en bonne et due forme, comme si l'on avait cliqué sur un bouton ? Oui, avec .requestSubmit(). À noter que cette méthode attend légitimement une référence vers le bouton censé être à l'origine de la demande, justement pour le déclarer comme « submitter ». Mais ce paramètre reste optionnel et s'il n'est pas passé, c'est le formulaire lui-même qui est déclaré submitter.

Par contre, encore une fois, cela ne règlera pas ton problème parce qu'intercepter l'événement et l'annuler avec un return false ou un .preventDefault() explicite aura pour effet d'annuler totalement la soumission du formulaire. Ta page ne sera pas rechargée mais tes données ne seront pas envoyées non plus.

Là encore, si ton objectif est d'envoyer des données en arrière-plan, alors deux options s'offrent à toi :

• Soit tu utilises fetch() en apprenant à l'utiliser, ce qui n'est pas difficile mais pas trivial non plus quand on manipule un formulaire ;
• Soit tu utilises une méthode « POST » et tu te débrouilles pour que ton serveur renvoie « 204 No Content » plutôt que « 200 OK ». La RFC 1945 indique que ce code sert à cela et qu'en principe, l'user agent (ici le navigateur client) doit laisser la page inchangée. Ça fait longtemps que je ne m'en suis pas servi, je ne sais plus comment les navigateurs récents y réagissent.