Envoyer une variable JS d'une page html vers une autre [Résolu]

Signaler
-
 Tramweb -
Bonjour,

J'essaye de faire communiquer 2 pages html en envoyant une variable de la première vers la deuxième page.
En cochant des cases dans la première page je stock des valeurs dans ma variable puis en appuyant sur suivant je me retrouve sur la deuxième page.

Je voudrais pouvoir continuer à compléter ma variable dans la deuxième page en la transférant simplement.

Comment faire ?

2 réponses

Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Bonsoir,

Ton explication est flou ! Quelle est le but de ces transfères de données ?

Je vais essayé de reformuler ce que j'ai compris.
Tu veux via un formulaire (première page), cliquer sur le bouton submit et une autre page s'ouvrirait (target="_blank") et l'on retrouve les données envoyés par la première page.

Si c'est cela, je te propose un formulaire ou les données seront sérialisé et envoyer par l'URL.

Voici un exemple pour la page 1

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
	<div class="container" style="width: 200px;">
		<form enctype="multipart/form-data" method="post" id="mon_form" action="#">
			<div class="form-group">
				<label for="param-un">Param1:</label>
				<input type="text" class="form-control" id="param-un" name="param[un]" value="v1">
			</div>
			<div class="form-group">
				<label for="param-deux">Param2:</label>
				<input type="text" class="form-control" id="param-deux" name="param[deux]" value="v2">
			</div>
			<div class="form-group">
				<label for="param-trois">Param3:</label>
				<input type="text" class="form-control" id="param-trois" name="param[trois]" value="v3">
			</div>
			<button type="submit" class="btn btn-default" onclick="$.app.send();return false;">Submit</button>
		</form>
	</div>
	
    <script type="text/javascript">
	  //<![CDATA[
	    $(function() {
	    	$.app = {
				url: '',
				
				send: function() {
					//document.location = $.app.url+'?'+$('#mon_form').serialize();
					window.open($.app.url+'?'+$('#mon_form').serialize(), '_blank');
				}
			}
			
			$.app.url = "http://localhost/test/page2.php";
        });
    </script>
</body>
</html>


Voici la page 2 avec un print_r qui afficherait les données

<pre><?php print_r($_GET['param']); ?></pre>

cette réponse et utile pour moi merci
Entre temps j'ai trouvé une technique en utilisant le local.storage, ce qui garde la valeur de ma variable tant que le navigateur n'est pas fermé.

En tout cas merci pour ton commentaire.
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Je me disais, il cherche quelque chose de plus élaboré.
C'est pas mal. Je ne connaissais pas.

Voici un ex. en français https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html

A++
en quoi local storage est plus élaboré qu'un simple formulaire? C'est juste plus compliqué et moins sûr et permet de garder les données plus longtemps que la session active... bref les 2 façons existent et servent dans différents cas, ici le formulaire serais plus adapté puisqu'il n'y a aucun besoin de garder les données.

Une autre façon de faire similaire au formulaire est simplement d'écrire les variables dans l'URL et de les récupérer dans la page concernée. C'est évidemment beaucoup moins sûr; la meilleure façon de faire serais simplement de tout faire sur la même page (ce qui supprime tout problème de sécurité dans l'échange et toute opération de transfert qui est superflue puisque seul le résultat complet peut être utilisé par le programme, donc impossible qu'entre les 2 pages les données se perdent si échec de la connexion) quitte à modifier le formulaire au fur à mesure de son remplissage - ou n'importe quel élément au sein de la même page-, voire rajouter le contenu de la 2nd page dans une fenêtre modale pour bien marquer la rupture entre les 2 étapes si il y a ces 2 étapes...

Bref sans connaître la finalité, le but et le script associé c'est inutile de tergiverser on peut pas dire grand chose sauf que la façon de faire ici n'est pas géniale et provoque une surcharge de travail qui est bien inutile et peut provoquer des failles de sécurité et erreur...mais peut-être il y a il une raison à cela(bien que j'en vois pas vraiment ...).


Le stockage en local est le remplaçant des cookies tellement peu sûr et envahissant pour l'utilisateur, il convient de voir ses avantages et défauts , dans le cas qui nous concernne c'est du temps de traitement et de développement complétement superflu surtout et votre solution du formulaire la bonne bien que ne pas avoir à transférer les données entre 2 pages pour un même formulaire soit encore mieux. Il conviens de voir les avantages et limites du web storage comme la compatibilité (comme tout ce qui est API HTML5) avec les navigateurs, éventuellement rajouter un polyfill si il y en a de possible - ce qui fait encore du temps de travail pouvant être facilement évité en modifiant la conception pour qu'elle soit intelligente et non absurde comme ici :

https://www.w3schools.com/html/html5_webstorage.asp