Formulaire assez complexe

**Raitei** · 08/06/2012, 14h32

Bonjour à tous, voici plusieurs jours que je planche sur un problème.

Je m'explique, je dois faire une appli web pour mon stage. Dans l'esprit elle est simple c'est un formulaire qui récupère des valeurs dans une BDD les propose et les enregistre dans une nouvelle table ensuite.

Or, beaucoup de fonctionnalités doivent être ajoutées pour respecter ce que mon tuteur me demande. Je m'explique :

Le formulaire va être composé de plusieurs input, pour l'instant rien de bien difficile. Mais aussi d'une liste déroulante (dont les valeurs sont tirées d'une table, ça j'ai réussi), cette liste est liée à un input en autocomplétion. J'ai réussi à faire ça en PHP mais j'ai un soucis c'est que pour que ça fonctionne la page est obligée d'être rechargée. Donc possible perte des données (même sûr car j'ai déjà testé ^^). J'ai donc cherché une méthode pour éviter ça car me direz vous si il n'y a qu'une liste + input c'est bon, on sélectionne en premier et basta, mais là il doit y avoir au moins 2 liste + input (en autocomplete). Donc j'ai trouvé du javascript, chose que je n'avais jamais vu avant, j'essaye de m'y faire tant bien que mal.

Avec de l'adaptation de code trouvés, j'ai réussi à faire correspondre une liste à une autre liste sans actualiser la page. Mais quand je veux faire comme en PHP avec un input autocomplete, là c'est un tout autre problème car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise) le PHP s’exécute en premier et donc impossible de récuperer les valeurs de la liste...

Ca me pose vraiment un gros problème car c'est le centre même de mon projet, de plus même si c'était que des listes on pourrait s'arranger pour sélectionner les listes en premières et ensuite saisir les informations. Mais le soucis c'est que je dois trouver un moyen d'ajouter le formulaire plusieurs fois et donc quand on va sélectionner les nouvelles listes, cela va réactualiser la page et perdre les valeurs...

Ce formulaire a beaucoup de champs liés c'est pour ça que c'est un peu galère, pour ça je dois utiliser du javascript ce qui est plutôt chaud quand on en a jamais fait mais j'arrive à m'en sortir avec la multitude de script/forum sur la toile, mais je n'ai pas réussi à trouver de solution à ce problème de taille.

Donc je m'adresse aujourd'hui à vous pour vous demander un peu d'aide et m'aiguiller svp

Merci d'avance.

Raitei.

Invité · 08/06/2012, 14h41

salut,

car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise)

si.

Ya ton navigateur (genre firefox).
Tu tapes www.toto.com/mapage.php

Le serveur execute le script php.
Et te renvoi du contenu genre:

Code :

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

1
2
3
4
<html>
kikooolol
<script>alert('hello')</script>
</html>

Ton navigateur lis le contenu.
et execute le javascript.

Donc php est cote serveur.
et javascript cote client. (ou local mais preferes le mot client)

**Raitei** · 08/06/2012, 14h53

Ok j'ai juste inversé c'est cool de ta part de me reprendre, j'ai inversé sans m'en rendre compte fin bref. répondre juste pour reprendre je vois pas l'intérêt.

Sinon quelqu'un a une idée pour m'orienter ? :s

Invité · 08/06/2012, 15h09

répondre juste pour reprendre je vois pas l'intérêt.

ben au contraire c'est plutot important.

Quand tu es clair. Et qu'on te reprends, tu sais que t'as tord et tu corriges. Donc tu etais pas sur de toi, maintenant oui.

Le deuxieme point, c'est que si tu construis une argumentation sur un truc bancal, ca sert a rien d'aller plus loin. Donc oui, quand je vois une erreur qui potentiellement influe le reste, je vais pas chercher plus loin.

Maintenant, j'ai du mal a te lire, et j'ai horreur de dechiffrer et de jouer a devinettes, donc je passe la main, et je ne doute absolument pas que les gens plus chaleureux t'aideront

**Darkyl** · 08/06/2012, 15h16

car PHP étant interprété en local et javascript par le serveur (normalement je dis pas de bétise)

galerien69 a raison, si tu dis cela à un entretien d'embauche, tu vas te faire remercier directe donc merci galerien69 de prendre le temps de corriger les petites erreurs qui peuvent couter cher.

donc quand tu pense cela:

donc impossible de récuperer les valeurs de la liste...

tu n'as pas encore trouver le pourquoi du problème. Sans pourquoi, pas de comment...

**Raitei** · 08/06/2012, 15h17

Ok c'est cool de ta part, je vais pas m'attarder la dessus je vois pas l'intérêt, je suis là pour régler un problème que j'ai eu et non me prendre la tête pour une inversion. Après le mec qui fait les sujets juste pour corriger ça fait un peu rire quand même, c'est sûr que c'est bien de corriger les erreurs des gens mais si ça apporte quelque chose, là dans mon cas rien du tout.

Enfin bref, y'a rien à déchiffrer, si tu comprends pas ce que j'ai écris tant pis.

Oulah, je suis pas en entretient là, je viens juste demander de l'aide pour mon soucis...

Envoyé par Darkyl

donc quand tu pense cela:

tu n'as pas encore trouver le pourquoi du problème. Sans pourquoi, pas de comment...

Me semble avoir dis que je m'étais trompé. Je cherche justement un moyen pour récupérer la valeur et la passer dans ma requête SQL pour avoir les différents mots en auto-complétion.

**Darkyl** · 08/06/2012, 15h18

calmos, galerien69 m'a déjà bien aider sur des topic et son but n'est pas de faire l'interessant mais réellement de corriger ce qui peut porter préjudice.

Avec de l'adaptation de code trouvés

et si tu te sers pas de code tout fait? T'y arrive?

Attention: ce n'est pas une critique, juste que des fois, si on refais tous soit même, le problème disparait et on comprend mieux...

Je sais pas si cela à un rapport, j'ai pas tout compris a ton problème mais sache juste que pour exécuter du php, il faut recharger le code, pas de recharche->pas d'éxécution.... Donc soit tu appel une page pour le traitement et là tu vas te coltiner les problèmes récurrents de formulaire chez les amateurs, soit tu fais autrement, par ajax par ex...

**Raitei** · 11/06/2012, 09h34

Bonjour, désolé de la réponse tardive, mais je n'ai pas eu accès au net ce week-end.

Donc, déjà merci pour le lien. Je l'ai regardé (http://siddh.developpez.com/articles/ajax/#LIV-A) mais il y a quelque chose que j'arrive pas à faire, même avec cet exemple. Car tout ce que j'ai trouvé, y compris cet exemple parle d'insérer du code html dans la page lors de la sélection de l'option de la liste déroulante. Or, moi je cherche à trouver les valeurs qui correspondent à celle-ci et les mettre sous la forme 'val1', 'val2', 'valx', ...
dans le source de cette fonction qui permet l'autocomplétion :

Code :

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

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
 
]
}); 
});

J'ai donc essayé en modifiant le code proposé avec mes nom de variables :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
Fichier type_objet.php
 
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type="text/javascript" src="./jquery.min.js"></script>
		<script type="text/javascript" src="./jquery-ui.min.js"></script>
		<script type='text/javascript'>
 
 
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('objet').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxObjet.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('type_objet');
				idtypeobjet = sel.options[sel.selectedIndex].value;
				xhr.send("idType_objet="+idtypeobjet);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>type_objet</label>
				<select name='type_objet' id='type_objet' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("paper");
						$res = mysql_query("SELECT * FROM type_objet ORDER BY name_typeobjet");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_typeobjet"]."'>".$row["name_typeobjet"]."</option>";
						}
					?>
				</select>
				<label>objet</label>
				<div id='objet' style='display:inline'>
				<input id="autocomplete" name="objet"/>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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
 
fichier ajaxObjet.php
 
 
<script>
   $(document).ready(function() {
						$("input#autocomplete").autocomplete({
							source: [
							<?php
							if(isset($_POST["idType_objet"])){
								mysql_connect("localhost","root","");
								mysql_select_db("paper");
								$res = mysql_query("SELECT id_objet,name_objet FROM objet WHERE id_typeobjet=".$_POST["idType_objet"]." ORDER BY name_objet");
								while($row = mysql_fetch_assoc($res)){
									echo '"'.$row["name_objet"].'",' ;
								}
							}
							?>
							]
						});	
					});
</script>
<?php echo "<input id=\"autocomplete\" name=\"objet\"/>"; ?>

Malheureusement, ceci ne fonctionne pas, j'avais réussi à avoir les deux listes liées entre elles. Mais lorsque je veux rajouter mon autocomplétion ça ne fonctionne pas :s

Edit : J'ai l'impression que ça n'éxécute même pas le code de ajaxObjet.php. Car j'ai testé de mettre 'test' dans le source, ça ne fonctionne pas non plus. Alors que si je migre le code dans type_objet.php, ça fonctionne (en mettant un numéro pour l'id bien sûr et en enlevant la condition). Quelqu'un aurait une idée ?

Vraiment je pète un cable, je n'arrive pas du tout à utiliser la fonction qui est dans le 2eme fichier, alors que si je la déplace dans le premier elle fonctionne :s

**Torgar** · 13/06/2012, 11h50

type_objet.php

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript" src="./jquery-ui.min.js"></script>
        <script type='text/javascript'>
 
 
 
            function getXhr(){
                var xhr = null; 
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
                                return xhr;
            }
 
            /**
            * Méthode qui sera appelée sur le click du bouton
            */
            function go(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        var leselect = xhr.responseText;
 
                        var scripts = "";
 
                        while(leselect.indexOf('<script>')!==-1){
                            var provisoire = leselect.substr(leselect.indexOf('<script>')+8);
                            scripts += provisoire.substr(0,provisoire.indexOf('</script>'));
                            leselect = leselect.substr(0,leselect.indexOf('<script>'))+leselect.substr(leselect.indexOf('</script>')+9);
                        }
 
                        eval(scripts);
 
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('objet').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","ajaxObjet.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('type_objet');
                idtypeobjet = sel.options[sel.selectedIndex].value;
                xhr.send("idType_objet="+idtypeobjet);
            }
        </script>
    </head>
    <body>
        <form>
            <fieldset style="width: 500px">
                <legend>Liste liées</legend>
                <label>type_objet</label>
                <select name='type_objet' id='type_objet' onchange='go()'>
                    <option value='-1'>Aucun</option>
                    <?
                        mysql_connect("localhost","root","");
                        mysql_select_db("paper");
                        $res = mysql_query("SELECT * FROM type_objet ORDER BY name_typeobjet");
                        while($row = mysql_fetch_assoc($res)){
                            echo "<option value='".$row["id_typeobjet"]."'>".$row["name_typeobjet"]."</option>";
                        }
                    ?>
                </select>
                <label>objet</label>
                <div id='objet' style='display:inline'>
                <input id="autocomplete" name="objet"/>
                </div>
            </fieldset>
        </form>
    </body>
</html>

ajaxObjet.php

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
26
<?php
$output = '<script>';
$output .= '$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: [';
 
 
if(isset($_POST["idType_objet"])){
    mysql_connect("localhost","root","");
    mysql_select_db("paper");
    $res = mysql_query("SELECT id_objet,name_objet FROM objet WHERE id_typeobjet=".$_POST["idType_objet"]." ORDER BY name_objet");
    while($row = mysql_fetch_assoc($res)){
        $output .= '"'.$row["name_objet"].'",' . "\n";
    }
}
 
$output .= ']
        });    
    });
</script>';
$output .= '<input id="autocomplete" name="objet" />';
 
// Utilise l'un ou l'autre
//echo $output;
return $output;
?>

Si toutefois la boucle qui parse la réponse contenant le code javascript qui doit être exécuté ne fonctionne pas, regarde la fonction live de jQuery (v1.3).

**Raitei** · 13/06/2012, 14h10

Bonjour, merci de ta réponse.

Je viens de l'essayer, mais celle-ci m'affiche un message en haut de page

Code :

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

')); leselect = leselect.substr(0,leselect.indexOf('')+9); } eval(scripts); // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('objet').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","ajaxObjet.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'auteur sel = document.getElementById('type_objet'); idtypeobjet = sel.options[sel.selectedIndex].value; xhr.send("idType_objet="+idtypeobjet); }

je suis en train de chercher la raison de ceci ^^'

**Torgar** · 13/06/2012, 14h22

Si c'est ce que tu as posté le message d'erreur, tu as du mal intégrer le code. En plus je vois pas pour quelle raison la presque totalité du code soit sur une ligne.

**Raitei** · 13/06/2012, 14h27

Bah j'ai recopié exactement les deux fichiers que tu m'as mis dans le forum.

Ensuite je suis allez en local sur la page type_objet.php et elle m'a affiché le message puis le fieldset contenant la liste et l'input (qui ne fonctionne pas actuellement normal si message d'erreur)

Formulaire assez complexe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager