11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Récupérer valeur de input - sans utiliser de form

Pages :
Salut Salut!

Bon... je dois admettre que ca fait un méchant bout de temps que j'essais de trouver la manière de faire ca.. j'ai recherché sur plusieurs sites et plusieurs forums si une personne a déjà eu le même problème.. mais sans succès..

J'espère seulement que ça se fait! lol

Bon..

J'ai une page php qui est un formulaire, permettant à l'utilisateur d'entrer un suivis, selon un magasin en particulier, et d'enregistrer ces informations dans une base de donnée.

Une boite défilente contient tous les magasin et selon le magasin sélectionné, une autre boite défilente est affiché avec le nom des contacts relié au magasin.

Donc, l'utilisateur doit choisir le magasin, le contact et entrer certaines informations dans des input et un textarea (ex: date du suivis et commentaires).

La manière que j'ai utilisé est un formulaire pour ce qui est de l'enregistrement des données.

Toutefois, si l'utilisateur sélectionne un autre magasin, la page courante se reload, en modifiant la boite défilente selon les contacts du magasin sélectionné.

Mon problème est le suivant: J'aimerais pouvoir faire en sorte que lorsque la page est reloadé, l'utilisateur n'ait pas complètement perdu les autres informations qu'il aurait déjà entré (ex: commentaires).

La seule manière que j'ai pu penser est de pouvoir envoyer en paramètre les valeurs du input et du textarea, lorsque je reload la page. Toutefois, je n'ai pas encore trouvé la manière de pouvoir récupérer les valeurs d'un input et d'un textarea, dans la page courante, sans avoir complété le formulaire Smiley ohwell

J'ai essayé plusieurs manières, comme un "onChange, onKeyPress.. etc.." dans le input, qui appel une fonction javascript et qui metterait la valeur dans une variable.. mais ca ne fonctionne pas Smiley decu .. car en fait, j'aurais besoin que la variable soit de type php....

Enfin, si quelqu'un a une idée.. ca serait apprécié!
Smiley biggrin

Mici d'avance!
Modifié le 11 Feb 2005 - 14:39
As-tu essayé de soumettre le formulaire normalement, en analysant à la récupération des données le cas dans lequel tu te trouves ?
Tu pourrais avoir une variable cachée indiquant le cas, variable que tu affecterais avant de soumettre le formulaire si la personne a modifié tel menu déroulant par exemple.
Ouais mais si je fais ca... j'aurai pas la bonne liste de contacts.. pour le magasin en question... tu comprends le dilemne? Car si le magasin a été changé... la liste des contacts doit changer afin que l'utilisateur puisse choisir un contact qui est relié au magasin sélectionné... Smiley sweatdrop

Mais si je fais ta solution, je pourrai pas modifier la liste des contacts.. Smiley confus

Merci
Modérateur
En fait, lorsque tu soumet le formulaire à la page courante, tu peux très bien récupérer la valeur des champs avec PHP. Tu les récupère bien pour faire ta requête d'insertion dans ta base de données, alors tout ce que tu as à faire, c'est de les récupérer et lorsque tu regénère ton formulaire, tu pré-rempli les champs avec les valeurs récupérées. Comprends-tu ce que je veux dire ?

Pour ce qui est de distinguer si tu dois regénérer le formulaire ou effectuer l'insertion des données, tu peux vérifier si c'est précisément le bouton Submit d'enregistrement qui a été cliqué, ou bien un bouton submit qui permettait de recharger un menu déroulant.
Modifié le 02 Feb 2005 - 15:08
Modérateur
J'ajouterais que si tes listes de contacts ne sont pas trop longues, tu pourrais aussi utiliser un seul menu déroulant avec la balise optgroup pour regrouper les contacts de chaque magasin.

Tu peux voir un exemple de ce type de menu sur openweb. Simple suggestion.
a écrit :
En fait, lorsque tu soumet le formulaire à la page courante, tu peux très bien récupérer la valeur des champs avec PHP. Tu les récupère bien pour faire ta requête d'insertion dans ta base de données, alors tout ce que tu as à faire, c'est de les récupérer et lorsque tu regénère ton formulaire, tu pré-rempli les champs avec les valeurs récupérées. Comprends-tu ce que je veux dire ?


Je suis pas certaine de comprendre ce que tu veux dire Smiley ohwell

Dans le fond... ce que tu me proposes, (si j'ai bien compris), c'est que j'utilise deux formulaires? ou euhh... je sais pas ce que tu veux dire Smiley lol


Bon..

Parce que je suis daccord pour le fait que si je soumet mon formulaire à la page courante, je vais pouvoir récupérer mes valeurs sans problème... sauf que ca veut dire que l'utilisateur aurait besoin de cliquer sur le bouton submit... ?

À moins qu'il y ait un moyen de générer l'action sans avoir à cliquer sur le bouton?

Mais si je fais ca.... cé que cé pas la même page pour l'enregistrement et l'affichement.... donc faudrait que je copie mon code d'enregistrement dans la même page... c'est ce que tu veux dire?

En vérifiant si c'est le bouton qui a été cliqué -> dans ce cas on enregistre... ou si c'est moi qui l'a généré -> dans ce cas j'affiche...

euhh... c'est ca? Smiley sweatdrop


Pour ce qui est du menu avec balise optgroup... c'est une idée.. mais y a risque d'erreur que l'utilisateur sélectionne un contact qui n'est pas du bon magasin ... et y aurait une grosse vérification à faire .. ce serait plus simple pour l'utilsateur s'il n'a pas d'autres choix Smiley cligne

et puis... j'ai environ 24 magasins à..... 3 à 4 contacts chacun Smiley langue
Modifié le 02 Feb 2005 - 16:41
Modérateur
Roxy a écrit :
Parce que je suis daccord pour le fait que si je soumet mon formulaire à la page courante, je vais pouvoir récupérer mes valeurs sans problème... sauf que ca veut dire que l'utilisateur aurait besoin de cliquer sur le bouton submit... ?


Pas forcément. Cela dépend s'il a Javascript ou non d'activé. Tu pourrais mettre un champ caché du style :


<input type="hidden" id="Action" name="Action" value="1" />


Nous avons ici une seule page, form.php. Lorsque la page form.php est appelée, tu vérifie si le champ Action existe. Si oui, c'est que le formulaire a été soumit, que ce soit par Javascript, par un bouton submit juste à côté d'un menu déroulant (au cas où JS est désactivé) ou par le bouton submit "Enregistrer" en bas du formulaire. Lorsque form.php est appelée, tu as deux décisions à prendre :

1. Est-ce que je renvois la page au client avec les champs remplis
2. Est-ce que j'enregistre les données et je lui renvois une page de confirmation.php (redirection côté serveur).

Pour définir qu'est-ce que tu dois faire, tu vérifie si l'input Enregistrer a été envoyé au formulaire (que la variable existe), ce qui signifierait que l'utilisateur a réellement cliqué sur Enregistrer, et non simplement changé un menu déroulant. Si les champs sont bien remplis, tu fais l'étape 2. Dans le cas contraire, tu fais l'étape 1.

J'aimerais être plus clair, mais je suis un peu occupé en ce moment. J'essaye de faire vite tout en oubliant rien.

Le seul hic avec ça, c'est que tu oblige l'utilisateur à cliquer explicitement sur le bouton submit "Enregistrer", au lieu qu'il puisse simplement appuyer sur la touche du clavier ENTER. Sauf que d'un autre côté, ca l'évite les erreurs je crois.

Je n'ai jamais eu à faire un formulaire de ce genre, mais je crois que ce serait la première chose que j'essayerais. C'est une solution qui me semble bonne.

En espérant que ca puisse t'aider un peu.
Modifié le 02 Feb 2005 - 17:01
Modérateur
Sinon, rien ne t'empêche de faire ton formulaire en plusieurs étapes. Tu demande à l'utilisateur de choisir le magasin. La page se recharge. Tu lui demande ensuite le contact et les autres données requises. Ce serait peut-être plus simple pour toi si tu n'es pas à l'aise avec PHP. À toi de voir.

Note : J'ai aussi eu une autre idée en utilisant du javascript qui permettrait d'éviter les rechargements de page, mais ca devient un peu trop compliqué à expliquer. Je préfère que mes premières suggestions soient bien comprises avant de me lancer dans une autre suggestion. Smiley smile
Modifié le 02 Feb 2005 - 17:14
Merkel a écrit :


Pas forcément. Cela dépend s'il a Javascript ou non d'activé. Tu pourrais mettre un champ caché du style :


<input type="hidden" id="Action" name="Action" value="1" />


Nous avons ici une seule page, form.php. Lorsque la page form.php est appelée, tu vérifie si le champ Action existe. Si oui, c'est que le formulaire a été soumit, que ce soit par Javascript, par un bouton submit juste à côté d'un menu déroulant (au cas où JS est désactivé) ou par le bouton submit "Enregistrer" en bas du formulaire.



Euh... j'avoue que j'ai du mal à comprendre. En fait je n'ai jamais utilisé de champs caché...

Donc, tu dis que je devrais utiliser un champs caché.. est-ce que c'est que lorsque la sélection du magasin est modifié, je crée ce champ caché... afin de savoir que la page est rechargé à cause de la sélection du magasin. Mais alors je vais devoir utiliser javascript pour "forcer" le submit du formulaire? C'est possible de faire ca? Smiley lol

Pour ce qui est de s'assurer que javascript est activé.. y a pas de problème car c'est une application web qui sera utilisé par le support à la clientèle de mon travail, alors y a pas de danger que le javascript ne soit pas activé Smiley biggrin

Pour ce qui est de la vérification une fois que la page est reloadé, j'ai pas de problème avec ca.. ca n'a pas l'air compliqué Smiley ravi

Merci!
Modérateur
J'avous avoir un peu de mal à expliquer le fonctionnement de ma suggestion dans un simple post d'un forum. Pour moi, mes explications sont claires, mais c'est toujours plus clair pour celui qui comprend déjà. Smiley langue Il faudrait que je code le tout et que je t'explique chaque partie, à la manière d'un tutorial, au lieu de faire une explication complètement théorique. Cependant, le temps ne me le permet pas vraiment.

Puisque tu m'annonce que le Javascript sera toujours activé, j'aurais une solution pour toi qui t'éviterais le rechargement de la page, et qui pourra être accessible quand même en ajoutant quelques codes.

Il s'agirait d'utiliser le javascript qui permettrait de faire communiquer deux menus déroulants. Voici un exemple sur cette page : http://wildmary.net-sauvage.com/javascript/. Regarde "Liste Déroulantes Dynamiques".

Il s'agit de programmation Javascript, et j'ignore si tu es douée là-dedans. Essaye tout de même l'exemple, tu verras que la page ne se recharge jamais. En changeant l'élément de gauche, le menu déroulant de droite s'ajuste en conséquence. Je crois que ca pourrait t'intéresser.

Ce sera probablement compliqué à expliquer, mais ce sera peut-être plus adapté à tes besoins.

À plus tard !
Ouahhh!!!

C'est juste génial!!! Smiley clapclap

mici beaucoup beaucoup beaucoup Merkel! Smiley prie
J'en reviens pas de pas avoir pensé à ça!! C'est pourtant tout simple!!

Je m'y met tout de suite!

Bon.. vais avoir un gros tableau avec mes 24 magasins Smiley lol mais c'est tellement plus simple que tout ce à quoi j'aurai pu penser!! Smiley cligne
Modérateur
Je suis content que cette solution te convienne.

Pour rester dans le thème du forum, je te suggère quand même de rendre ton formulaire accessible.

Le principe auquel j'ai pensé serait le suivant :

1. Tu écris le code html des menus déroulants avec Javascript (document.write). Ce qui ferait en sorte qu'ils n'apparaissent que si le javascript est activé.

2. Dans une balise <noscript>... code ...</noscript>, tu écris le code html pour un seul menu déroulant utilisant les optgroup qu'on a parlé précédemment. Celui-ci contiendrait la liste complète des magasins et des contacts. Ce menu ne s'afficherait que si le Javascript n'est PAS activé.

Conclusion :

Si le Javascript est activé, tu as les deux menus déroulants qui communiquent ensemble.

Si le javascript est désactivé, tu as un seul menu déroulant avec la liste de tous les contacts.

Tu y réfléchiras une fois que tu auras réussis à utiliser l'exemple donné.
Modifié le 03 Feb 2005 - 16:37
Oui tu as raison, c'est une bonne idée.. je vais faire ca Smiley smile
Je vais toutefois commencer par réussir la première option avant de faire la deuxième Smiley ravi

a écrit :

2. Dans une balise <noscript>... code ...</noscript>, tu écris le code html pour un seul menu déroulant utilisant les optgroup qu'on a parlé précédemment. Celui-ci contiendrait la liste complète des magasins et des contacts. Ce menu ne s'afficherait que si le Javascript n'est PAS activé.

Conclusion :

Si le Javascript est activé, tu as les deux menus déroulants qui communiquent ensemble.

Si le javascript est désactivé, tu as un seul menu déroulant avec la liste de tous les contacts.



Bon... je rencontre un autre problème.. Smiley decu

J'ai du modifier un peu l'exemple pour pouvoir utiliser mes variables php avec le javascript.. car mes données sont dans des variables php Smiley langue

Mais étrangement, quand j'arrive dans ma fonction qui sert à effacer ma liste contact et la recréer selon la sélection de la liste stores... eh bien j'obtien l'erreur suivante:

Error: 'tabStores[...].length' is null or not an object


Alors j'ai l'impression qu'il ne reçoit jamais la valeur de ma liste stores... j'ai du mal à comprendre... pourtant je l'appel bien comme suit:

<SELECT name="stores" size="1" ONCHANGE="rechargerContacts(this.form)">


et je reçois comme suit:

<script type="text/javascript">
tabStores = new Array();

// Recharger liste déroulante contacts
function rechargerContacts(leForm)
{
    var listeCont = leForm.contacts;
    var storeSel = leForm.stores.value;
    var tailleCont = listeCont.options.length;

    // Suppression des options présentes
    for(var i=1; i < tailleCont ; i++)
    {
        listeCont.options[1] = null;
    }

    // Ajout des nouvelles options
    for(var i=0; i < tabStores[storeSel].length; i++)
    {
        var opt = new Option(tabStores[storeSel][i]);
        listeCont.options[listeCont.options.length] = opt;
    }
    listeCont.focus();
}
</script>


[/i]
t'aurais pas une idée?
pourtant... je sais que ma liste est pas vide, je click dessus! Smiley lol
Modifié le 03 Feb 2005 - 21:34
Modérateur
Dans le code que tu me montre, je ne vois pas l'endroit où tu crée ton array à deux dimensions, comme sur l'exemple de Wildmary :


// Creation d'un tableau a deux dimensions
generationListe = new Array();
generationListe["PROD"] = new Array("VOGA_B","BEGO_Q","BEGO_I","BEGO_R","REFPROD","BEGO_P","BEGO_T",
                "BEGO_W","VOGA_A","MATTO_A","BEGO_S");
generationListe["VAL"] = new Array("REFVAL");


Tu dois générer ce même code mais dynamiquement avec PHP. Ces variables Javascript doivent exister et être alimentées.
lol.. cé que je voulais pas tout copier pour pas que ce soit dur à suivre Smiley langue

alors voilou:

<!-- DEBUT SELECT STORES -->
<tr><th id=titre2>Magasin:</th>
<td><SELECT name="stores" size="1" ONCHANGE="rechargerContacts(this.form)">

<?php
	
	/* SELECT - Stores */
	$requete_stores = "SELECT store_id, store_surnom, store_id FROM stores 
		WHERE store_id <> $aiksStoreId Order by store_surnom";
	$id_resultat_stores = mysql_query($requete_stores);
	
	/* Récupérer le nombre d'enregistrements */
	$nb_enregistrements_stores = mysql_numrows($id_resultat_stores);
	
	while ($val_stores = mysql_fetch_array($id_resultat_stores)) /* Parcourir les résultats de la requête */
	{
		$storeId = $val_stores["store_id"];
		$storeSurnom = $val_stores["store_surnom"];
		$storeSurnom = str_replace("'", "’", $storeSurnom);
					
		echo '<OPTION VALUE="$storeId">'.$storeSurnom. '</OPTION>';		
		
		/* SELECT - Contacts */
		$requete_contacts = "SELECT contact_id, contact_nom FROM contacts 
		WHERE store_id in($aiksStoreId, $pStoreId) ORDER by contact_nom";
		$id_resultat_contacts = mysql_query($requete_contacts);
	
		/* Récupérer le nombre d'enregistrements */
		$nb_enregistrements_contacts = mysql_numrows($id_resultat_contacts);
		$i=0;
		



	/***** ICI *****/
		echo '<script type="text/javascript">'
			. 'tabStores["'.$storeSurnom.'"] = new Array;'		
			. '</script>';



		while ($val_contacts = mysql_fetch_array($id_resultat_contacts)) /* Parcourir les résultats de la requête */
		{			
			$contactId = $val_contacts["contact_id"];
			$contactNom = $val_contacts["contact_nom"];
				
			


		/***** ICI *****/
			echo '<script type="text/javascript">'
				. tabStores["'.$storeSurnom.'"]['.$i.']=("'.$contactNom.'");'
				. '</script>';


			
			$i++;			
		}// while				
	}// while
?>

<!-- FIN SELECT STORES -->
</SELECT></td></tr>

<!-- DEBUT SELECT CONTACTS -->
<tr><th id=titre2>Contact:</th>
<td><SELECT name="contacts" size="1"> 
<!-- FIN SELECT STORES -->
</SELECT></td></tr>



J'ai tous mit pour que tu puisses comprendre tous le côté avec la base de donnée etc...

Mici encore
Modifié le 03 Feb 2005 - 22:57
Modérateur
Pourrais-tu me montrer le code html et javascript qui est généré à partir de ca ? Pour ce qui est de la liste des contacts et des magasins, t'as qu'à changer les données pour une question de confidentialité. Mais j'aimerais voir ce que ca donne au final ton code html et javascript.
euhh...?

comment je fais?

je comprend pas comment je peux te montrer le code généré par le php.... ?
Modérateur
Tu appeles ta page php avec ton navigateur, et tu fais Affichage / Source. Évidemment, la page php doit être en ligne et traitée par le serveur.
Modifié le 03 Feb 2005 - 23:03
Ouahh.. c'est bien à savoir ça!
Ça aide à remarquer des erreurs que sinon on remarque pas... comme je viens de voir deux trucs qui ne semblent pas trop fonctionner dans mon code php...

C'est mon mysql_numrows() et mon mysql_fetch_array()... ils disent que mon mysql_numrows fonctionne pas pour ma requête sql afin d'avoir ma liste des contacts pour le magasin... Smiley ohwell

Est-ce que ça se peut que ce soit qu'ils n'acceptent pas une requête sql quand on est en plein milieu d'un fetch pour une requête précédente? Je veux dire... je suis en train de récupérer les donners de ma requête pour les magasin et à chaque ligne je fais une nouvelle requête pour avoir les contacts... est-ce que ce pourrait être ça le problème? Car j'ai fait pourtant exprès de pas prendre le même nom de variable pour ma requête, mon id résultat.. etc...

En tk.. je te donne quand même ce que ça fait..



<HTML>

<HEAD>
<LINK rel=stylesheet type="text/css" href="../styles.css">
<TITLE>Backups - Ajout suivis</TITLE>

<script type="text/javascript">
tabStores = new Array();

// Recharger liste déroulante contacts
function rechargerContacts(leForm)
{
    var listeCont = leForm.contacts;
    var storeSel = leForm.stores.value;
    var tailleCont = listeCont.options.length;

    // Suppression des options présentes
    for(var j=1; j < tailleCont ; j++)
    {
        listeCont.options[1] = null;
    }

    // Ajout des nouvelles options
    for(var j=0; j < tabStores[storeSel].length; j++)
    {
        var opt = new Option(tabStores[storeSel][j]);
        listeCont.options[listeCont.options.length] = opt;
    }
    listeCont.focus();
}
</script>


</HEAD>
<BODY>
<p id=header>Backups - Ajout suivis</p>
<br>

<!-- DEBUT FORM -->
<FORM NAME='ajoutSuivis' ACTION='sauvegarderSuivis.php' METHOD='POST'>

<!-- DÉBUT TABLE -->
  <CENTER><TABLE border=0 width=80%>



<!-- DEBUT SELECT STORES -->
<tr><td id=titre2>Magasin:</td>
<td><SELECT name="stores" size="1" ONCHANGE="rechargerContacts(this.form)">

<OPTION VALUE="1">Magasin1</OPTION><br />

<b>Warning</b>:  mysql_numrows(): supplied argument is not a valid MySQL result
resource in <b>c:\wamp\www\support\backups\ajoutsuivis.php</b> on line <b>118</b><br />

<script type="text/javascript">tabStores["Magasin1"] = new Array;</script><br />

<b>Warning</b>:  mysql_fetch_array(): supplied argument is not a valid MySQL result
resource in <b>c:\wamp\www\support\backups\ajoutsuivis.php</b> on line <b>125</b><br />


<OPTION VALUE="2">Magasin2</OPTION><br />

<b>Warning</b>:  mysql_numrows(): supplied argument is not a valid MySQL result
resource in <b>c:\wamp\www\aiks - support\backups\ajoutsuivis.php</b> on line <b>118</b><br />

<script type="text/javascript">tabStores["Magasin2"] = new Array;</script><br />

<b>Warning</b>:  mysql_fetch_array(): supplied argument is not a valid MySQL result
resource in <b>c:\wamp\www\aiks - support\backups\ajoutsuivis.php</b> on line <b>125</b><br />


<!-- FIN SELECT STORES -->
</SELECT></td></tr>

<!-- DEBUT SELECT CONTACTS -->
<tr><td id=titre2>Contact:</td>
<td><SELECT name="contacts" size="1"> 
<!-- FIN SELECT STORES -->
</SELECT></td></tr>

<tr><td id=titre2>Date (aaaa-mm-jj) :</td>
<td><input type='text' name='dateAnnee' size='4' value='2005'> -
<input type='text' name='dateMois' size='2' value='02'> - 
<input type='text' name='dateJour' size='2' value='04'></td></tr>
<tr><td id=titre2>Notes :</td>
<td><TEXTAREA name='notes' rows=4 cols=55 wrap=soft></TEXTAREA></td></tr>
<tr><td><br><input type='submit' value='Sauvegarder'></td>
<td><br><input type='reset' value='Annuler'></td></tr>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>


Comme tu peux voir, la récupération de mes données pour ma liste de contacts selon chaque magasin ne se fait pas... pourtant j'ai fait exactement pareil comme pour les magasins (en modifiant bien entendu le nom des variables qui récupèrent Smiley langue )


Je comprend pas pour mes options, y a "<br />" qui s'affiche à la fin.... j'ai pourtant pas codé ca... cé normal?
<OPTION VALUE="1">Magasin1</OPTION><br />



PS: Ce que tu vois pour magasin1 et magasin2.. les erreurs, ca donne ces erreurs pour les 24 magasins Smiley decu
Modifié le 04 Feb 2005 - 15:03
Modérateur
Pour ce qui est du <br /> qui apparaît et que tu n'as semble-t-il pas codé, je pense que ca doit être PHP qui écrit ce code lorsqu'une erreur survient. Il doit faire un <br /> pour ensuite écrire l'erreur. Simple hypothèse, parce que je ne code pas du tout en PHP, mais en un autre langage. Je te laisse deviner lequel. Smiley cool

Je ne peux donc pas répondre à ta question sur mysql_numrows() et mon mysql_fetch_array().

Ton code :


<script type="text/javascript">

tabStores = new Array();

// Recharger liste déroulante contacts


Dans ton code, je ne vois toujours pas où tu crée ton array Javascript à deux dimensions... Smiley sweatdrop Tu dois avoir une variable Javascript contenant tes magasins et tes contacts. Je ne la vois pas dans ton code. Peut-être l'aurais-tu simplement effacé dans le message du forum pour une question de confidentialité ? Ceci dit, il faut d'abord que tu corrige ton erreur PHP. Smiley cligne
Modifié le 04 Feb 2005 - 15:59
Pages :
Sujet clos
Aller à