Remplir un champ texte dynamique

Version imprimable

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:

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::calim2:

Code:

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:lol:

04/06/2014, 11h44
iakou

Bonjour.

Code:

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

RIen ne vaut de trouver par soi-même

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

Depuis la page JavaScript appelante:

Code:

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

Dans la page appelée

Code:

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:

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:yaisse3::yaisse2::yaisse1:

04/06/2014, 15h36
informer

Citation:

Envoyé par iakou

Bonjour.

Code:

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:D

Bonsoir.

Tout simplement :
Code:

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.

Bonsoir informer,
quelques remarques en vrac :)

Code:

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:

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:

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:

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:

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 !

05/06/2014, 10h35
informer

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

Bonjour chez vous:lol: