[PHP] Formulaire dynamique

siinox · 2 Mai 2013

Bonjour,

j'essaie de réaliser un quizz en Php mais je bute sur un point, sur mon formulaire de creation du quizz j'ai un champ pour l'intitulé de la question et 3 champs pour les propositions de réponse et j'aimerai pouvoir ajouter des questions au quizz de façon dynamique avec un nombre maximum de 10 questions (et bien entendu chacune a 3 propositions de reponses)

J'ai trouvé des exemples de script Javascript qui permettent d'ajouter des propositions de réponse à une question :

Code:

<div id="files"><input type="file" name="file[]" class="file"/></div>

Code:

<head>
	<title>Sondages entre amis</title>
	<link type="text/css" rel="stylesheet" href="/css/styles.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
	<script src="/js/sondages.js" type="text/javascript"></script>
</head>

Le problème c'est que moi c'est ajouter une question que je voudrai et là où ça pose problème c'est pour l'insertion en base de données.
Je dispose des tables suivantes :

Quizz : id, date_creation, date_fin
Questions : quizz_id#, numero, intitulé, proposition1, proposition2, proposition3, reponse

Voilà je ne sais pas comment gérer l'insertion en bdd d'un formulaire au nombre de question dynamique.

Anto1982 · 2 Mai 2013

Bonjour Siinox,

Dur de répondre en l'état actuel des choses... Le mieux serait que tu donnes un exemple de ce que tu souhaites faire... Ton code javascript (celui dans le fichier: /js/sondages.js) on ne sait pas ce qu'il fait...

De toute façon, javascript est un code executé du coté "client" (sur le navigateur de ton utilisateur) donc impossible d'interagir avec ta base de données à ce moment là (à moins de faire un peu d'ajax, c'est ce que tu essayes de faire avec jquery j'imagine?)

Sinon, je vois pas trop le problème:
Si tu n'as que deux choix possibles pour une question, ne remplis pas la colonne "proposition3" dans ta table... (?)

siinox · 2 Mai 2013

En fait je veux utiliser le javascript pour générer des nouveaux champs texte, sur clic d'un bouton le script créer 5 nouveaux champs (intitulé de la question, proposition 1, proposition 2, proposition 3, reponse), et celà autant de fois que je cliquerai sur le bouton dans la limite de 10 questions maximum.
Ensuite pour intéragir avec la base j'utilise le PHP, la question c'est sur le submit du formulaire je voudrai insérer les données pour chaque question, je pensais parcourir les questions avec une boucle :

Code:

For (i=1; i <= nb_question; i++) {
    $sql = "insert into question(quizz_id, numero, intitulé, prop1, prop2, prop3, reponse) values(**********)"
    $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
}

Et là je ne sais pas comment insérer les bonnes valeurs, comment faire correspondre les bon input

zeb · 2 Mai 2013

values(**********)

Avec des post comme si tu avais un formulaire classique sauf qu'il faut jouer avec un indice qui sera synchro avec ton JS qui génère les champs.
Le JS doit être capable d'ajouter un champ du style
<imput type="text" name="truc_1" value="" />
et tu auras la post équivalente au submit :
$_POST[$variable]
où $variable = 'truc_'.$i;
A noter qu'il serait bon de tester l'existence de la POST avant de faire quoi que ce soit sur la base puisque ton JS peut introduire un a N champs donc tu n'auras pas forcement un résultat existant a mettre en base (sans parler des contrôles habituels).
Pour contourner le test d’existence tu peux ajouter un champ caché que ton JS incrémentera au fil des ajout de champs donc tu pourra récupérer ton indice max. Ou alors boucler sur la globale des post avec un while.

siinox · 3 Mai 2013

Merci Zeb, j'ai résolu mon problème grâce à toi.
J'ai trouvé un nouveau script que j'ai adapté et tout fonctionne super bien.

Je met le code pour ceux qui auraient les mêmes difficultés que moi (le code peut sans doute être optimisé, il n'y a pas les vérifications de base) :

Code:

<form method="post" action="quizz.php">
			<fieldset>
	       		<legend>Nouveau quizz</legend>
				Date de fin : <input type="date"><br />
			    Annonce : <br />
			    <textarea rows="3" cols="30"></textarea><br />
			</fieldset><br />
			<fieldset>
				<legend>Question n°1</legend>
				Intitulé : <input type="text" name="intitule_1" /><br />
				Proposition 1 : <input type="text" name="prop1_1" /><br />
				Proposition 2 : <input type="text" name="prop2_1" /><br />
				Proposition 3 : <input type="text" name="prop3_1" /><br />
				Réponse : <input type="text" name="reponse_1" /><br />
			</fieldset><br />
			<span id="leschamps_2"><a href="javascript:create_champ(2)">Ajouter une question</a></span><noscript><a href="http://www.editeurjavascript.com/countus/">compteur live</a></noscript>
			<input type="submit" name="create_quizz" value="Soumettre" /><br />
		</form>

Code:

<script>
		function create_champ(i) {

		var i2 = i + 1;

		document.getElementById('leschamps_'+i).innerHTML = '<fieldset><legend>Question n°'+i+'</legend>Intitulé : <input type="text" name="intitule_'+i+'"><br />Proposition 1 : <input type="text" name="prop1_'+i+'" /><br />Proposition 2 : <input type="text" name="prop2_'+i+'" /><br />Proposition 3 : <input type="text" name="prop3_'+i+'" /><br />Réponse : <input type="text" name="reponse_'+i+'" /><br /></fieldset>';
		document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')">Ajouter une question</a></span>' : '';


		}
  </script>