Soumission d'un formulaire

**kristen44** · 10/05/2021, 20h18

Bonjour,

Je teste la possibilité pour le visiteur d'un site d'alerter le webmaster de la présence d'un lien cassé sur la page web où il est en cliquant sur une image et en choisissant avec des boutons radio le lien défectueux.
J'ai une page de test ici, avec 3 liens, dont un faux. Ça a l'air de marcher (il faut cliquer sur l'image), mais en fait la valeur n'est pas transmise au fichier php.
Les outils de Chrome me donnent le message :

Form submission canceled because the form is not connected

Voici le 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
<!DOCTYPE html>
<meta charset="UTF-8">
<head>
<title>test2</title>
<script>
function suite()
{
        document.getElementById('H2O').innerHTML="Merci";
        var popup2 = document.getElementById("popup");
        var inner= popup2.innerHTML;
        inner= "</br>Votre message a été envoyé</br>vous pous fermer la fenêtre</br>";
        popup2.innerHTML= inner;
} 
 
function liste()
{
        document.getElementById('H2O').innerHTML="Choisissez le lien cassé";
        var arr = [], l = document.links;
        var popup = document.getElementById("popup");
        var inner = '<form  method="post" action="traitement.php" id="zeForm">';
        var en_tete ='';
    for (var i=0; i<l.length; i++) {
          en_tete=l[i].href;
          if ((en_tete.indexOf('http') !== -1)&&(en_tete.indexOf('http://localhost') !==0)) {
        inner= inner + '<input type="radio" name="lien-kaputt" id="'+en_tete+'" value="'+en_tete+'"onChange="montre_bouton()"' + en_tete +'" >' + en_tete +'</br>';
        }
     }
    inner=inner + '</br><button type="submit" id="modalbutt" onClick="suite()">envoyer</button>';
        popup.innerHTML = inner;  
        document.getElementById('modalbutt').style.visibility='hidden'; 
}
 
 
function  montre_bouton()
 {
         document.getElementById('modalbutt').style.visibility='visible';
}
 </script>
<style>
        blabla...       
</style>
</head>
<body>
<a href="#openModal"><img alt="liammoù" title="liammoù torr"  onClick="liste()" src="liamm-torr.png" border="0" /></a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="serriñ" class="close">X</a>
<h2 id="H2O"></h2>
<div id="popup">
</div>
</div>
</div>
</br>
 
voir <a href="http://www.parkallann.bzh" target="_blank">www.parkallann.bzh</a> </br>
voir <a href="http://parkallann.bzh" target="_blank">parkallann.bzh</a> </br>
voir <a href="http://gougougoul.bzh" target="_blank">gougoul.bzh</a> </br>
<div id="reponse"></div>
</body>
</html>

Si je modifie la ligne définissant le bouton d'envoi (ligne 28 du code) en supprimant le onClick="suite()" :
1 - la valeur est bien transmise à mon programme PHP (qui l'affiche pour l'occasion tellement il est content)
2 - mais le programme reste bloqué sur la page PHP et la suite ne s'exécute pas..

À tester ici

Au secours ! Concernant le message de Chrome j'ai testé plusieurs solutions trouvées sur le web mais aucune n'a marché...

**NoSmoking** · 12/05/2021, 11h26

Bonjour,
je vois une grosse incohérence dans ton code

Tu crées ton formulaire dans l'élément <div id="popup"> qui contient également le bouton de soumission qui lui au clic exécute la fonction suite(), donc juste avant la soumission du formulaire.

Seulement voilà, dans ta fonction suite() tu détruis ton formulaire lorsque tu remplaces le elPopup.innerHTML par un autre contenu, ... ,lors de la soumission ton formulaire n'existe donc plus dans ta page !!

**kristen44** · 12/05/2021, 15h57

Exact ! mais je ne vois pas quoi mettre dans la fonction appelée par onSubmit.. Plus généralement, ce que je ne comprends pas, c'est pourquoi dans la version modalwindow2.html, une page s'affiche générée par php, au lieu d'un retour pur et simple à mon programme. Au cas où voici le code provisoire :

Code :

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

1
2
3
4
5
6
7
8
9
<?php
header('Content-type: text/html; charset=UTF-8');
if( $_POST){
  if (isset( $_POST['lien-kaputt'])){
   $lienkaputt = $_POST['lien-kaputt'];
   echo $lienkaputt;
 }
}
?>

J'ai essayé de vire le header ; même résultet. En fait, c'est là que se fera l'insertion du lien envoyé dans une base SQL

**mathieu** · 12/05/2021, 16h01

Envoyé par kristen44

une page s'affiche générée par php, au lieu d'un retour pur et simple à mon programme.

c'est parce que le clic sur le bouton "submit" envoie les données à l'url de la balise "form" donc c'est envoyé à "traitement.php".

**kristen44** · 12/05/2021, 16h04

Mais quand on envoie des données sur un serveur (formulaire ou autres), on reprend la main après normalement, non ?

**mathieu** · 12/05/2021, 16h57

une fois que le formulaire est envoyé, la page actuelle est déchargée et remplacée par le contenu généré par la 2e page donc "traitement.php".

si vous voulez envoyer une requête http en javascript et rester sur la même page, essayez d'utiliser une requête ajax :
https://dmouronval.developpez.com/tu...-requete-ajax/

**kristen44** · 12/05/2021, 18h31

Hé bien hé bien, j'en apprends des choses... Apparemment, ce que j'essayais de faire n'est réalisable qu'avec AJAX ! Je marque donc résolu, même si mon problème ne pouvait pas l'être avec la méthode utilisée.

Un grand bravo et merci à tous
Kristen

Soumission d'un formulaire

JavaScript

Discussions similaires

Partager

Partager