Formulaire dynamique et fonction de vérification

Sujet résolu

13 mai 2010 à 12:46:09

Bonjour,

J'ai un formulaire qui se crée dynamiquement en cliquant sur + ou - on ajoute et on enlève des fieldset. Ca marche bien.

Après ca j'ai une fonction de vérification qui est appellée grâce au onsubmit du form. Ce qu'il se passe c'est que j'aimerai que si le dernier fieldset ou les 2 derniers etc sont totalement vides alors on les supprime, c'est pour celà que j'ai une variable "last". J'ai une boucle sur chaque fieldset qui appelle une autre fonction qui vérifi le fieldset.

Le problème c'est que quand je supprime un fieldset,j'ai l'impression que tout le form se recharge, je perds donc les infos qui ont été tapées dans les fieldset précédents.

Une autre question: je voudrais que tout mon site soit sur une seule page. Je crois qu'avec du php c'est possible, mais je ne trouve rien sur le net. En fait je n'ai que 2 pages, le form et le résultat.

Deuxième autre question: j'ai une feuille css et je crée un cadre autour de mon form. Problème le cadre est fixe et j'aimerai qui s'agrandisse et se rapetisse quand des fieldset sont ajoutés et supprimés.

mon formulaire

<html>
   <head>
      <title>My website for Web-Based System</title>
	  <link rel="stylesheet" type="text/css" href="mystyle.css" />
      <script type="text/javascript">
	  var compteur = 0;
		if (window.addEventListener)
		{
		 window.addEventListener('load', firstFunction, false);
		}
		else
		{
		 window.attachEvent('onload', firstFunction);
		}
		function firstFunction()
		{
		 addFunction();
		 document.forms['form'].gname.focus();
		}
         function addFunction(){
			compteur = compteur +1;
                        conteneur   = document.getElementById('panels');
                        mydiv      = document.createElement('fieldset');
			LegendName      = document.createElement('legend');
			LegendName.innerHTML='Panel '+compteur;
			myLabel = document.createElement('label');
			myLabel.innerHTML='Label : ';
			myST = document.createElement('label');
			myST.innerHTML='Search Term : ';
			mySpace = document.createElement('br');			
                        lab = document.createElement('input');
                        searchT = document.createElement('input');
                        lab.type = 'text';
			searchT.type = 'text';
			lab.id   = 'label';
			searchT.id = 'term';
			lab.className='noproblem';
			
			mydiv.appendChild(LegendName);
			mydiv.appendChild(myLabel);
                        mydiv.appendChild(lab);
			mydiv.appendChild(mySpace);
			mydiv.appendChild(myST);
                        mydiv.appendChild(searchT);
                        conteneur.appendChild(mydiv);
         }
		 function removeFunction(){
		 if(compteur >1)
		 {
			compteur = compteur -1;
                        conteneur   = document.getElementById('panels');
			a = conteneur.lastChild;
                        conteneur.removeChild(a);
         }
		 }

		 function verifForm()
		{
			conteneur   = document.getElementById('panels');
			var isOk = true;
			
			if(document.getElementById('gname').value.length == 0)
			{
				document.getElementById('gname').className='mistake';
				document.getElementById('gnamelabel').className='mistake';
				isOk = false;
			}
			else
			{
				document.getElementById('gname').className='noproblem';
				document.getElementById('gnamelabel').className='noproblem';
			}
			
			var last = true;
			
			var i;
			for(i=compteur-1; i>=0; i--)
			{
				if(i ==0) last = false;
				var myfieldisOk = verifPan(conteneur.children[i],last);
				last = false;
				if( myfieldisOk == 1)
				{
					last = true;
				}else if (myfieldisOk == 2)
				{
					isOk = false;
				}
			}
			return isOk;
		}

		function verifPan(field,last)
		{
			var isOk = 0;
			var isOklabel = true;
			var isOkterm = true;
		   if(field.children[2].value.length ==0)
		   {
				field.children[2].className='mistake';
				field.children[1].className='mistake';
				isOklabel = false;
		   }
		   else
		   {
			  field.children[2].className='noproblem';
			  field.children[1].className='noproblem';
		   }
		   
		   if(field.children[5].value.length ==0)
		   {
			  field.children[5].className='mistake';
			  field.children[4].className='mistake';
			  isOkterm = false;
		   }
		   else
		   {
			  field.children[5].className='noproblem';
			  field.children[4].className='noproblem';
		   }

		   if(!isOklabel && !isOkterm && last)
		   {
				field.Parent.removeChild(field);
				compteur--;
				isOk = 1;
			}
			else if(!isOklabel || !isOkterm)
			{
				isOk = 2;
			}
			return isOk;
		}
      </script>
   </head>
   <body>
   <form action="index.html" id="form" methode= "POST" onsubmit="return verifForm()">
  <p>
		<label  id="gnamelabel" />Gallery Name :</label> <input type="text" id="gname" name="gname" /><br />
		<div id='panels'>
		
		 </div>
		 
         
            Add/Remove
            <input type='button' name='add' value='+' onclick='addFunction()' /> 
			<input type='button' name='remove' value='-' onclick='removeFunction()' /> <br />
			
			<input type='submit' name='show' value='Show Gallery'/>
			
      </form>
   </body>
</html>

form {
 position: relative ;
 left: 15% ;
 width: 40% ;
 height: 90% ;
 padding: 20px ;
 border: solid 2px #4A4783 ;
 }

input.mistake {
        background-color:rgb(250,180,180);
    }
	
input.noproblem {
        background-color:white;
    }
label.mistake
{
   color: #EB2525;
}

label.noproblem
{
   color: black;
}

Si vous êtes arrivés jusque là c'est que vous êtes courageux!

Merci d'avance pour votre aide.

Nyro Xeo

13 mai 2010 à 13:31:40

Quelque chose est faux ici :

<form action="index.html" id="form" methode= "POST" onsubmit="return verifForm()">

___

Ensuite, lorsque tu crées tes input, tu ne leur donnes pas l'attribut "name". Comment fais-tu pour traiter les résultats ? (D'ailleurs, si tu ne connais pas le PHP, oui, comment fais-tu ?)

___

Citation : toi

Une autre question: je voudrais que tout mon site soit sur une seule page. Je crois qu'avec du php c'est possible, mais je ne trouve rien sur le net. En fait je n'ai que 2 pages, le form et le résultat.

Ta page doit avoir l'extension ".php", par exemple index.php. Et voici le code :

<?php
if (isset($_POST['show']))
{
?>
<!-- Ici se trouve le code HTML de la page de résultat -->
<?php
} else {
?>
<!-- Ici se trouve le code HTML de la page du formulaire -->
<?php
}
?>

À la ligne 2, tu remplaces "show" par la valeur que tu as donnée à l'attribut "name" de ton bouton "submit" dans le formulaire. (En l'occurrence, c'est bien "show".)

Après normalement il faut faire ça avec tous les champs que tu vas utiliser et traiter dans la page de résultat, mais tu verras ça sur le forum PHP.

___

Une dernière chose : je te conseille de mettre ton script dans un fichier .js séparé, comme tu l'as fait avec le CSS.

Chacha35

13 mai 2010 à 14:14:00

Merci pour ta réponse.

J'ai suivis tes conseils. J'ai ajouté des attribut name à tous mes input. j'ai créer mon index.php, mais lorsque je submit, je me retrouve sur mon form vide.

<?php
if (isset($_POST['show']))
{
?>

<html>
   <head>
      <title>My website for Web-Based System</title>
	  <link rel="stylesheet" type="text/css" href="mystyle.css" />
      <script type="text/javascript" src="myformJS.js"></script>
   </head>
   <body>
   <?php echo $_POST['gname']; ?> 
   </body>
</html>

<?php
} else {
?>
<html>
   <head>
      <title>My website for Web-Based System</title>
	  <link rel="stylesheet" type="text/css" href="mystyle.css" />
      <script type="text/javascript" src="myformJS.js"></script>
   </head>
   <body onload="firstFunction();">
   <form action="index.php" id="form" methode= "POST" onsubmit="return verifForm()">
  <p>
		<label  id="gnamelabel" />Gallery Name :</label> <input type="text" id="gname" name="gname" /><br />
		<div id='panels'>
		
		 </div>
		 
         
            Add/Remove
            <input type='button' name='add' value='+' onclick='addFunction()' /> 
			<input type='button' name='remove' value='-' onclick='removeFunction()' /> <br />
			
			<input type='submit' name='show' value='Show Gallery'/>
			
      </form>
   </body>
</html>
<?php
}
?>

Nyro Xeo

13 mai 2010 à 14:20:35

Normal, tu n'as pas corrigé ceci :

Citation : Nyro Xeo

Quelque chose est faux ici :

<form action="index.html" id="form" methode= "POST" onsubmit="return verifForm()">

Chacha35

13 mai 2010 à 14:26:21

Ba si c'est index.php maintenant et si j'ai bien compris si ma fonction verifForm renvoie true, le form est envoyé.

Nyro Xeo

13 mai 2010 à 14:27:10

Y a autre chose...

(Ca t'énerve que je te donne pas la réponse hein

)

Chacha35

13 mai 2010 à 14:35:38

Un peu oui!

Mais j'ai trouvé une grosse boulette :method et le ; . Mais ça ne marche toujours pas.

<form action="index.php" id="form" method= "POST" onsubmit="return verifForm();">

Nyro Xeo

13 mai 2010 à 14:38:58

Bon le ";" n'est pas très important si tu n'as pas plusieurs instructions. Je parlais effectivement du "method".

Chez moi, avec ces corrections, ça marche.

Chacha35

13 mai 2010 à 14:48:13

On n'est pas dans un forum css, mais bon j'ai trouvé, c'était tout simple, il suffisait d'enlever la contrainte sur la hauteur.

Sinon, normalement je devrai me retrouver avec une page vide avec juste ce que j'ai tapé dans mon champs 'gname' après avoir appuyé sur mon bouton. Et moi, mon form se recharge.

Je vais tout revérifier, mais c'est bizarre.

En tout cas merci.

Nyro Xeo

13 mai 2010 à 14:59:30

Citation : Chacha35

Sinon, normalement je devrai me retrouver avec une page vide avec juste ce que j'ai tapé dans mon champs 'gname' après avoir appuyé sur mon bouton. Et moi, mon form se recharge.

http://nyro.xeo.online.fr/test/index.php
http://nyro.xeo.online.fr/test/index.php?source

Chacha35

13 mai 2010 à 15:27:23

C'est bon, ça marche! C'est moi qui faisait n'importe quoi.

Merci pour ta patiente.