Remplir un champ texte dynamique

**informer** · 03/06/2014, 14h05

Bonjour à tous,

Merci par avance de vos retours sur un problème qui est surement de base mais je n'arrive pas à comprendre le mécanisme pour, comme le dit l'intitulé, afficher dans un champ texte d'un formulaire appelé depuis une fichier JS, la/les données passées en paramètre.

Bon ça c'est le blabla, maintenant passons au code:

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
function logIn()
{	try
	{	/* Manipuler un objet avec JQuery : $(#idObject).propriétés/méthodes  */
		var serialData = $( "#frmLogIn" ).serialize(); 
		alert (serialData);
		$.ajax
                (   {   type: "POST",
                        url: "sqlLogIn.php",
                        data: serialData,
                        dataType: "json",
                        success: function(dataSQL, statut)
                        {   var page = "formulaire.html?id=" + dataSQL[0]["IDPARTICIPANT"];
                            window.location.replace(page);
                        },
                        error: function(dataSQL, statut)
                        {   alert ("error sqlConnect.js : " + dataSQL.erreur);
 
                        }
                    }
		);
	}
	catch (e)
	{     alert ('An error has occurred: '+ e.message);
	}
}

Ma fonction sqlConnect.js ==> Connexion OK.

Mon problème commence avec la ligne window.location.replace(page); qui appelle le formulaire suivant:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
....
<body>
<div id="wb_formulaire" style="position:absolute;left:148px;top:57px;width:1102px;height:735px;z-index:3;">
<form name="formulaire" method="post" action="" enctype="text/plain" id="formulaire">
<div id="wb_Image1" style="position:absolute;left:8px;top:7px;width:184px;height:75px;z-index:0;">
<img src="images/lapaeyreLogo.png" id="Image1" alt="" style="width:184px;height:75px;"></div>
<div id="wb_YouTube1" style="position:absolute;left:5px;top:99px;width:188px;height:167px;z-index:1;">
<iframe width="188" height="167" src="http://www.youtube.com/embed/MaVideo?rel=1&amp;autoplay=1&amp;version=3&amp;autohide=0&amp;theme=dark" frameborder="0"></iframe>
</div>
<div id="wb_Text1" style="position:absolute;left:355px;top:12px;width:514px;height:32px;text-align:center;z-index:2;">
<span style="color:#FFFFFF;font-family:Arial;font-size:27px;"><strong>participantInfo</strong></span></div>
</form>
</div>
</body>

Et mon objectif est d'afficher dans id="wb_Text1" la valeur passée en paramètre via window.location.replace(page); depuis le fichier sqlConnect.js et correspondante à ?id=" + dataSQL[0]["IDPARTICIPANT"] .

Question subsidaire, le texte de l'objet id="wb_Text1" peut-il être modifié ou faut-il un autre objet?

Bon j'espère avoir été compréhensible et bien sûr, toute aide est la bien venue

**iakou** · 04/06/2014, 11h44

Bonjour.

Code :

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

var page = "formulaire.html?id=" + dataSQL[0]["IDPARTICIPANT"] ;

Votre page 'formulaire' ne devrait-elle pas plutôt posséder l'extension "php" (afin d'accéder à la superglobale $_GET).

Cordialement

**informer** · 04/06/2014, 15h20

Après moult recherches, j'ai trouvé cette solution:

Depuis la page JavaScript appelante:

Code :

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

1
2
3
var page = "formulaire.html" ;
var iduser = dataSQL[0]["IDPARTICIPANT"];
window.location.replace(page+ "?id=" + iduser);

Dans la page appelée

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
.......
</head>
......
<script type="text/javascript" src="swfobject.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="formulaire.js"></script>
</head>
<body onload="initFormulaire();return false;">
.....
</body>
</html>

Dans la page formulaire.js

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
function initFormulaire()
{   
    alert ("appel onload: ca marche");
    var urlParam =  extractUrlParams();
    alert(urlParam["id"])
    document.forms.formulaire.txtUser.value=urlParam["id"]; // Pas de librairie JQuery necessaire
    //$("#txtUser").val(urlParam["id"]); //==> Necessite l'include JQuery
 }  
 
function extractUrlParams()
{   /* Fonction de récupération des paramètres GET de la page
    * @return Array Tableau associatif contenant les paramètres GET  */	
    var urlParam = location.search.substring(1).split('&');
    var pArray = new Array();
    for (var i=0; i<urlParam.length; i++)
    {   var x = urlParam[ i ].split('=');
        pArray[x[0]]=x[1]; //    MyArray['NomChamp']='valeur'; ->le nom ['NomChamp'] sera associée à la ligne et avec la valeur 'valeur'. Cf.  tableau associatif dim 1*/
    }
    alert(pArray["id"]);
    return pArray;}

Bon ça fonctionne mais c'est surement une solution à l'arrache
Bonne lecture

**informer** · 04/06/2014, 15h36

Envoyé par iakou

Bonjour.

Code :

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

var page = "formulaire.html?id=" + dataSQL[0]["IDPARTICIPANT"] ;

Votre page 'formulaire' ne devrait-elle pas plutôt posséder l'extension "php" (afin d'accéder à la superglobale $_GET).

Cordialement

Bonjour Iakou,

Merci pour ta suggestion car elle pourrait me faire comprendre un élément fondamental de la program web et je te remercie par avance de me confirmer ce que je semble avoir compris.

Je peux déclarer un formulaire html avec l'extension php, ce qui me permettrait d'accéder aux super globals, c'est bien ça?

Par contre, un truc m'échappe, comment récupérer les infos dans la superglobale $_GET pour les affecter dans des champs du formulaire?

Merci pour ta réponse

**iakou** · 04/06/2014, 22h43

Bonsoir.

Tout simplement :

Code html :

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

1
2
3
4
5
6
7
8
<html>
<head></head>
<body>
     <form>
     <div id="wb_Text1"><?php echo $_GET["id"]; ?></div>
     </form>
</body>
</html>

PS: votre solution via Javascript (en attaquant la query string) était bonne également.

**Watilin** · 04/06/2014, 23h26

Bonsoir informer,
quelques remarques en vrac

Code :

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

alert ("appel onload: ca marche");

Contraignant alert, tu ne trouves pas ? Il y a mieux : console.log. Les messages apparaissent dans la console de ton navigateur, que tu peux ouvrir avec la touche F12 normalement, et ça n'interromp pas l'exécution de ton script.

Code :

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

1
2
document.forms.formulaire.txtUser.value=urlParam["id"]; // Pas de librairie JQuery necessaire
//$("#txtUser").val(urlParam["id"]); //==> Necessite un include JQuery

Ce code jQuery que tu as mis en commentaire contient un #, qui est un sélecteur d'id. Cela signifie que tu peux simplement accéder à ton input comme ceci :

Code :

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

document.getElementById("txtUser")

Ensuite, pArray[x[0]]=x[1]; :
il y a quelques petits dangers à vouloir utiliser un « vrai » tableau (type Array) en JavaScript quand on veut en fait utiliser une structure clé-valeur (on appelle ça parfois un dictionnaire). Utilise un objet littéral :

Code :

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

1
2
3
4
5
var dic = {};
 
// ces deux lignes sont équivalentes :
dic.NomChamp = 'valeur';
dic['NomChamp'] = 'valeur';

Et à propos de ta fonction extractUrlParams :
il manque la phase de décodage. C'est nécessaire quand il y a des caractères spéciaux dans les paramètres GET, sinon tu te retrouves avec des séquences du genre de %3D. Je te propose une version à base de regexp :

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
function extractUrlParams()
{  /** Fonction de récupération des paramètres GET de la page
    * @return Object Dictionnaire contenant les paramètres GET */
 
   var dic = {};
 
   var paramString = location.search;
   var regexp = /(?:^\?)?([^=]+)=([^&]*)&?/g;
   var groups;
   while (groups = regexp.exec(paramString)) {
      dic[ decodeURIComponent(groups[1]) ] = decodeURIComponent(groups[2]);
   }
 
   console.log(dic.id);
   return dic;
}

En gros, la regexp fonctionne comme ça :

En début de chaîne, saute le ? (les parenthèses avec ?: forment un groupe non capturant). Je me suis dit que, quitte à utiliser une regexp, autant lui faire faire aussi le substring ; mais je n'ai pas vérifié si on y gagne vraiment quelque chose en performance.
Un premier groupe est capturé, s'arrêtant au premier = rencontré.
Le = est sauté.
Un second groupe est capturé, s'arrêtant au premier & rencontré. S'il n'y en a pas, le groupe va jusqu'à la fin de la chaîne.
S'il y a un &, il est sauté.
Et on recommence joyeusement car on est dans une boucle while !

**informer** · 05/06/2014, 10h35

Merci à vous tous pour vos commentaires et les belles lignes de code

Bonjour chez vous

Remplir un champ texte dynamique

JavaScript

Discussions similaires

Partager

Partager