Redirection en javascript

Version imprimable

Bonjour,
dans un formulaire html, je propose de saisir une date (calendrier en javascript) je vais tester cette date en javascript: si date pas saisie==> message d'alerte, si date saisie==> redirection vers un script php pour mise à jour d'une base mysql avec cette date. Pas moyen de faire fonctionner cette redirection avec "window.location.href". Mon code

Code:

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
<html>
<head>
            <!--chargement du css du calendrier-->
            <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/calendrier.css" />
 
            <!--chargement des ressources JS du calendrier-->
            <script type="text/javascript" src="calendrier.js"></script>
<script>
function valider(formulaire) {
        var mon_input = document.getElementById("date").value;
   if (mon_input !='')
   {if (confirm(" certain de vouloir purger jusqu'au " +mon_input +" ?")==true)
   {window.location.href="l'url ou je vais faire ma mise à jour php/mysql";} }
else {alert("Merci de saisir une date");}
}
</script>
</head>
<body> 	
<title>Purge des commandes</title>
<form action="" method="post" name="add" class="Style6" onsubmit="valider(this.form)">
   <p align="center"><strong><u>Purge commandes</u></strong></p>
  <table width="800px" border="5" align="center" cellpadding="5" cellspacing="0" bgcolor="#eeeeee">
  	<tr>
      <td style="border-right:0px;"><span class="Style8">Purger les commandes livr&eacute;es jusqu'au (jj-mm-aaaa):</span></td>
      <td style="border-left:0px;"><input name="date" type="text" id="date" class="calendrier" ></td>
     </tr>
    <tr>
      <td height="50" colspan="6"><div align="center">
        <input type="submit" name="Submit" value="Purger"  style="background-color:lightsteelblue;color:black;font-weight:bold ">
      </div></td>
    </tr>
  </table>

après la saisie de la date puis submit, le script semble redémarrer sans que la redirection ait été effectuée, ceci que je l'essaye en local (WAMP servr); par contre sir je l'essaye sur un serveur externe (free), mon navigateur me dit: "la connexion a été réinitialisée"
si je remplace window.location.href par un alert() çà fonctionne
Je coince..Une idée SVP

23/01/2018, 02h24
Watilin

Salut,

tu as deux problèmes : l’un est technique et l’autre est plus un problème de conception.

Le problème technique, c’est que tu n’annules pas la soumission du formulaire. Il faut que tu mettes, au choix, un return false à la fin de ton attribut onsubmit, ou bien changer l’attribut en return valider(this.form) et mettre un return false dans la fonction valider.
Si tu ne fais pas ça, la soumission du formulaire entre en concurrence avec la redirection, et d’après mes tests c’est le formulaire qui gagne, donc ton script de mise à jour des données n’est jamais atteint.

Le problème de conception, c’est que tu ne peux pas transmettre des données de formulaire en faisant une redirection JavaScript. En observant les logs de ton serveur ou en examinant les requêtes HTTP (par exemple avec l’onglet réseau des outils F12 de ton navigateur) tu peux voir que la redirection avec location.href provoque une requête GET qui ne transporte pas de données de formulaire. À moins que tu ne les ajoutes à l’URL, mais vu que tu fais une opération apparemment délicate (purge de données), je te déconseille de faire comme ça. C’est trop facile de faire une bêtise avec le bouton « précédent » ou « actualiser ».

Tu as plusieurs solutions.

:arrow: solution A : envoyer les données par ajax. C’est une technique classique, il y a des tutos partout, je ne vais pas rentrer dans les détails.

:arrow: solution B : changer à la volée l’attribut action du formulaire. C’est-à-dire, dans ta fonction valider, si la validation est bonne, tu fais formulaire.action = "l’url ou je vais faire ma mise à jour php/mysql"; et tu laisses la soumission se faire naturellement.

À toi de jouer ;)

Bonjour Watilin
merci de ta réponse qui me parait pertinente, mais...elle s'adresse à un néophyte..et j'ai du mal à la mettre en oeuvre...J'ai tenté la solution 2, ne voulant pas débuter avec ajax..
j'ai ajouté
Code:

1 2 3 4 5 if (mon_input !='') {if (confirm(" certain de vouloir purger jusqu'au " +mon_input +" ?")==true) {document.add.action =="mon_url?date=mon_input"; } } else {alert("Merci de saisir une date");}
la date saisie reste affichée dans le formulaire à l'écran, puis j'ai ajouté:
Code:

1 2 3 4 5 6 7 if (mon_input !='') {if (confirm(" certain de vouloir purger jusqu'au " +mon_input +" ?")==true) {document.add.action =="mon_url?date=mon_input"; document.add.submit(); } } else {alert("Merci de saisir une date");}
là, la date disparait du formulaire à l'écran mais je ne vais toujours pas vers l'url spécifié.
Désolé de te solliciter à nouveau...

Retire cette ligne :

Code:

document.add.submit();

Elle re-soumet le formulaire, mais en court-circuitant ta fonction valider. Comme je t’ai dit, laisse faire les choses naturellement, tu verras que la soumission se fait à la fin de ta fonction si celle-ci ne renvoie pas false.

Un exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Redirection de formulaire</title> </head> <body> <form action="page-1.php" onsubmit="return handleSubmit(event)"> <input type="submit"> </form> <script> "use strict"; function handleSubmit(event) { event.target.action = "page-2.php"; } </script> </body> </html>
Même si les pages page-1.php et page-2.php n’existent pas, tu pourras voir dans la barre d’adresse vers quelle URL tu es redirigé.

Autre chose : je ne sais pas ce que tu as cherché à faire avec cette ligne :

Code:

… .action = "mon_url?date=mon_input";

Mais voilà ce qui va se passer exactement : ton formulaire va envoyer une requête POST à l’adresse "mon_url", et en plus des données POST, il y aura un paramètre GET de nom "date" et dont la valeur sera la chaîne "mon_input".

En réalité, tu n’as pas besoin d’ajouter cette valeur à la main car, ton <input name="date"> faisant partie de ton formulaire, il sera envoyé naturellement en tant que donnée POST.

La solution ajax semble te faire peur, mais ce n’est franchement pas si compliqué. Voici un exemple de code (note : c’est une solution différente du code HTML ci-dessus, ne te mélange pas les pinceaux ;)) :
Code:

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 function valider(formulaire) { var mon_input = document.getElementById("date").value; if (mon_input === '') { alert("Merci de saisir une date"); } else { if (confirm("Certain de vouloir purger jusqu’au " + mon_input + " ?")) { // crée un objet ajax var req = new XMLHttpRequest(); // initialise une requête POST req.open("POST", "mon_url"); req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // fonction qui sera appelée à réception de la réponse req.onload = function () { alert( "Réponse du serveur :\n" + req.status + " " + req.statusText + "\n" + req.responseText ); }; // sérialisation des données var data = new FormData(formulaire); // envoi de la requête req.send(data); } } // empêche la soumission du formulaire return false; }

Bonsoir Watilin
En me basant sur l'exemple html que tu donnes, je suis parvenu à ce que je souhaitais.

Code:

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
<html>
<title>Purge des commandes</title>
<head>
            <!--chargement du css du calendrier-->
            <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/calendrier.css" />
 
            <!--chargement des ressources JS du calendrier-->
            <script type="text/javascript" src="calendrier.js"></script>
<script>
function valider(event) {
        var mon_input = document.getElementById("date").value;
   if (mon_input !='')
        {if (confirm(" certain de vouloir purger jusqu'au " +mon_input +" ?")==true)
                {
                 event.target.action = "purgecmd.php?date="+mon_input;
                }
                else
                {
                return false;
                }
        }
        else 
        {
        alert("Merci de saisir une date");
        return false;}
        }
</script>
</head>
<body> 	
<form action="" method="post" name="add" class="Style6" onsubmit="return valider(event)">
   <p align="center"><strong><u>Purge commandes</u></strong></p>
  <table width="800px" border="5" align="center" cellpadding="5" cellspacing="0" bgcolor="#eeeeee">
	<tr>
      <td style="border-right:0px;"><span class="Style8">Purger les commandes livr&eacute;es jusqu'au (jj-mm-aaaa):</span></td>
      <td style="border-left:0px;"><input name="date" type="text" id="date" class="calendrier" ></td>
     </tr>
    <tr>
      <td height="50" colspan="6"><div align="center">
        <input type="submit" name="Submit" value="Purger"  style="background-color:lightsteelblue;color:black;font-weight:bold ">
      </div></td>
    </tr>
  </table>
 </body>
 </html>

Encore merci de ton coup de main
JD