Sujet Précédent Sujet Suivant

Formulaire input text dynamique

Résolu/Fermé
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 - 6 mai 2008 à 03:09
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 11 mai 2008 à 18:55
Bonjour,

Je voudrais savoir s'il est possible de controler la saisie d'un champ de saisie avant de l'envoyer via un formulaire ?

J'ai testé ceci mais ça ne fonctionne que lorsqu'il y a une ligne

<head>
<SCRIPT language="Javascript" type="text/javascript">
/* Fonction qui vérifie que le champ montant soit renseigné */
function verifGetPlacement() {
if(document.formPlct.montant.value == "") {
alert("Vous devez saisir un montant");
document.formPlct.montant.style.backgroundColor = "#F3C200";
return false;
}
}

//Fonction qui rétablie la couleur des champs
function couleur(obj){
obj.style.backgroundColor = "#FFFFFF";
}
</script>
</head>

<body>

$i = 1;
while ($i <= 5){
<tr>
<form method="post" name="formPlct" action="test_input_text.php" onSubmit="return verifGetPlacement();">
<td align="center"> <?php echo "valeur ".$i ?> </td>
<td align="center">
<input type="text" name="montant" size="10" maxlength="8" onKeyUp="javascript:couleur(this);"/> €
</td>
<td align="center">
<input type="submit" value="Valider" />
</td>
</form>
</tr>

$i++;

}

Merci d'avance
A voir également:

10 réponses

Réponse 1 / 10
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
8 mai 2008 à 23:02
Arrrggg pour une raison que j'ignore le forum ne respecte pas tous les caractères de mon code !


Tu peux télécharger le code ici

http://www.nobodysperfect.freesurf.fr/verif_champ_dyn.zip
3
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
10 mai 2008 à 03:17
Merci pour cette réponse et pour le code, j'essais de le comprendre et de l'adapter.Je te tiens au courant de ce que j'ai réussi a faire.
0
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
11 mai 2008 à 05:43
Bonjour

Un grand merci pour ce code. Je l'ai compris dans les grandes lignes et adapté à mes besoins. C'est impécable :)

EDIT :
Une petite question : Comment faire pour récupérer les données passées par le formulaire (surtout de l'input text) proprement ?
0
Réponse 2 / 10
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
11 mai 2008 à 18:55
*
{
}

Permet definir un format global (ou générique) valable pour tous les éléments HTML

Bien sûr tu peux ensuite ajouter d'autres styles plus spécifiques.
3
Réponse 3 / 10
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
11 mai 2008 à 10:22
Bjr
D'Oh ! 05:43:31 ca fait tôt ! Ou alors tu n'es pas en France ... ;-)

Qu'entends-tu par récupérer proprement les données ?

D'abord une page de réception : reception.php 

<html>
<head>
<title>Réception des champs "dynamiques"</title>
<style>
*
{
	font-size : 10pt;
	font-family : Arial;
}
</style>

<script>

</script>
</head>
<body>
<pre>
<?php
print_r($_POST);
?>
</pre>
</body>
</html>


Modifie le script ainsi :

printf("<form id=\"%s\" name=\"%s\" method=\"post\" action=\"reception.php\">\n","form".$i ,"form".$i);


Si tu testes ça donne (en remplissant tous les champs du formulaire 0 par ex) 

Array
(
    [form0_0] => a
    [form0_1] => b
    [form0_2] => c
    [form0_3] => d
)


Pas mal mais on peut mieux faire en isolant proprement le nom du forumulaire du nom des champs

Dans ce cas modifiie la page principale ainsi 

for ($j=0; $j< 4; $j++)
{
    printf("Champ %s <input type=\"text\" id=\"%s\" name=\"%s\" size=\"5\"  value=\"\">\n",$j,"form".$i."_".$j ,"form".$i."[champ".$j."]");
}


Note que j'ai seulement changé la valeur de l'attribut "name" des imputs

Si tu retestes ça donne : 

Array
(
    [form0] => Array
        (
            [champ0] => a
            [champ1] => b
            [champ2] => c
            [champ3] => d
        )

)



Dans la page reception.php pour accèder au champ0 par ex tu peux faire 

<?php
if (isset($_POST["form0"]))
{
	$form = $_POST["form0"];
	if (isset($form["champ0"]))
	{
		echo "<p>Champ0 = ".$form["champ0"]."</p>";
	}
}
?>
2
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
11 mai 2008 à 18:28
Bonjour

Oui effectivement je suis en Polynésie Français actuellement donc 12h00 de décalage par rapport à la France :)

Pour le reste lorsque je disais proprement, je parlais du code que tu m'as fourni. J'avais commencer à faire ce système de isset(nom_du_form) et isset(nom_du_champ)

Encore une fois, j'essais de comprendre le code et de l'adapter

Merci
0
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
11 mai 2008 à 18:42
C'est impécable, la récupération se fait facilement, le code est clair, merci beaucoup pour ton aide !

Dernière petite question pour ma culture générale : dans le header, tu mets une * juste après avoir ouvert la balise <style>, a quoi ça sert ?
0
Réponse 4 / 10
Utilisateur anonyme
6 mai 2008 à 09:02
Bonjour,

faire sur le bouton submit un on click vers un javascript qui vérifie la saisie et qui fait si la saisie est bonne un document.submit
ou un return false.
1
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
6 mai 2008 à 21:21
Bonjour

Merci pour cette réponse, j'ai testé avec votre méthode :

[...]
function verifGetPlacement() {
alert ('on passe dans verifGetPlacement');
if(document.formPlct.montant.value == "") {
alert("Vous devez saisir un montant");
return false;
} else {
alert('good ça passe');
return document.submit;
}
alert('on ne passe pas dans le if ');
}
[...]
<table>
<?php
$i = 1;
while ($i <= 5){
?>
<tr>
<form method="post" name="formPlct" action="test_input_text.php">
<td align="center"> <?php echo "valeur ".$i ?> </td>
<td align="center">
<input type="text" name="montant" size="10" maxlength="8" /> €
</td>
<td align="center">
<input type="submit" value="Valider" onclick="return verifGetPlacement();"/>
</td>
</form>
</tr>
<?php
$i++;

}
?>
</table>
[...]

Le premier message d'alert "on passe dans verifGetPlacement" s'affiche mais après plus rien, ça passe à la page test_input_text.php sans rien afficher d'autre. Donc je ne sais pas ce qu'il se passe.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
Utilisateur anonyme
6 mai 2008 à 22:51
Bonsoir,
pas de return devant document.submit

mais plus simple exemple
<script ....
function verifForm(){
if (document.formulaire.NomIndividu.value =="" && document.formulaire.NomSociete.value =="")
{
alert('Un nom (personnel ou société) doit être rempli');
document.formulaire.NomIndividu.focus();
return false;
}
}
</script>

et dans le form
<form action="xxx.php" method="POST"
enctype="application/x-www-form-urlencoded" name=formulaire
onSubmit="return verifForm()">
1
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
8 mai 2008 à 02:46
Bonjour,

J'ai refait des tests en prenant votre exemple. Le résultat est le même que celui avec mon code, lorsqu'il est seul, il fonctionne mais lorsque qu'il se retrouve dans une boucle le test ne fonctionne plus.

Le problème vient du au fait que le formulaire est dans la boucle while et qu'il y a donc plusieurs formulaire avec le même nom, j'ai donc testé en mettant le formulaire en dehors de la boucle while, mais là encore le souci vient du fait que le champ vérifié a plusieurs occurrences dans le formulaire.
Il faudrait donc nommer chaque champs différemment tout en ayant la possibilité de connaître son nom lors de la vérification.

J'espère que mes explications sont assez claires pour que vous puissiez m'aider, d'ailleurs merci pour vos aides précédentes
0
Réponse 6 / 10
Utilisateur anonyme
8 mai 2008 à 09:51
Bonjour,
Il est évident que chaque champs doit avoir un nom différent.
il est aussi évident que la vérification est aussi différente : on ne vérifie pas avec les mêmes critères par exemple une date et une adresse mail.

dans un script la zone est connue par les mots : document.nom du formaulaire.nom de la zone et pour son contenu on ajoute .value


s'il n'y a qu'un formuliare, pas besoin de boucle while car le submit du formulaire ne sera fait que si toutes les vérifications sont correctes.

le script avec plusieurs vérifs devient : 'par exemple)

<script ....
function verifForm(){
if (document.formulaire.NomIndividu.value =="" && document.formulaire.NomSociete.value =="")
{
alert('Un nom (personnel ou société) doit être rempli');
document.formulaire.NomIndividu.focus();
return false;
}

if (document.formulaire.PreNomIndividu.value =="" )
{
alert('Un prénom doit être rempli');
document.formulaire.preNomIndividu.focus();
return false;
}

}
</script>
1
Réponse 7 / 10
flashz
8 mai 2008 à 10:25
Bonjour,
je rajoutes qu'il faut mettre un <input type="button" > et non un submit pour la vérification en javascript. Voici un code dont tu pourra t'inspirer.
Dans <head>, il fau bien sûr que l'attribut name du input corresponde(j'ai aussi nommé le form formulaire comme ceci <form name="formulaire" >) 

<script type="text/javascript" language="javascript">
function controle()
{
var msg="";
<!-- érification que le champ nom est rempli--->
if(document.formulaire.nom.value=='')
	{
	msg+='Entrez votre nom';
	}
<!---vérification que le champ n'est pas un nombre-->
	else if(!isNaN(document.formulaire.nom.value))
	{
	msg+='-Nom invalide';
	}

if(document.formulaire.prenom.value=='')
	{
	msg+='-Entrez votre prénom';
	}
	else if(!isNaN(document.formulaire.prenom.value))
	{
	msg+='-Prénom invalide';
	}
if(document.formulaire.birthdate.value==''){
	msg+='-Complétez votre date de naissance';
	}
var verifemail='';
	if(document.formulaire.email.value=='')
	{
	msg+='-Entrez votre email';
	} else if ((document.formulaire.email.value.lastIndexOf(".") < document.formulaire.email.value.indexOf("@")+2 
      || document.formulaire.email.value.lastIndexOf(".") > document.formulaire.email.value.length-3 
      || document.formulaire.email.value.indexOf("@") < 1 ) )
 {
msg+='-Email invalide';
}
<!-- si toutes les conditions sont remplies la var msg est vide, envoit en POST vers ma page php nommée sendform.php -->
if(msg==""){
document.formulaire.method = "POST";
document.formulaire.action="sendform.php";
 document.formulaire.submit();
}
<!-- sinon afficher message d'alerte avec les alertes en conséquence, \n fait un retour à la ligne--->
else{
alert(msg+'\n   -Merci de vérifier votre saisie-');

}

}

</script>


Le bouton envoyer du formulaire: 
<input type="button" value="Envoyer" class="bt" onClick="controle()" />
1
Réponse 8 / 10
Utilisateur anonyme
8 mai 2008 à 18:05
Je ne suis pas d'accord sur le type bouton, les deux façons sont possibles
le return false retourne au formulaire pour revoir la saisie.

mais si tu veux mettre ça il faudra dans le java script mettre un documen.submit() si les vérifs sont bonnes.

1
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
8 mai 2008 à 21:27
Bonjour

Merci pour vos réponses, j'ai bien compris comment vérifier des champs créés "à la main" mais mon problème se situe plus au niveau de la vérification de champs créés dynamiquement via une boucle (while ou for)

Mes questions seraient :
* Est ce possible de vérifier la saisie de champs créés dynamiquement ?
Et si oui
* Comment puis-je changer le nom des champs créés dynamiquement tout en connaissant le nom dans la vérification du javascript ?.

J'avais pensé à un code comme ceci :
<?php
$i = 0
while ($i<5){
$formName = "formPlct".$i;
?>
<form method="POST" name="<?php echo $formName; ?>" enctype="application/x-www-form-urlencoded" action="test_input_text.php" onSubmit="return verifGetPlacement()">
<?php echo "valeur ".$i." = " ?>
<input type="text" name="montant" size="10" maxlength="8" onKeyUp="javascript:couleur(this);"/> €
<input type="submit" value="Valider" name="Submit" />
</form>
<?php
$i++
}
?>

mais le problème étant de connaitre la valeur de $i lors de la vérification dans le Javascript.

Bref vais-je devoir créer mes champs à la main ou y a t-il une solution ?
0
Réponse 9 / 10
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
8 mai 2008 à 21:47
Bsr

Evidemment que c'est possible de créer dynamiquement des champs puis de contrôler ensuite leur validiter.

Par contre il faut commencer par écrire la structure en JavaScript qui va permettre ce contrôle et sutout pas commencer par les champs pour ensuite remonter en JavaScript

Dans ton ex tu créés un formulaire pour chaque champ : c'est normal ca ?
1
Nijin Messages postés 26 Date d'inscription mardi 19 février 2008 Statut Membre Dernière intervention 24 juillet 2009 3
8 mai 2008 à 22:14
Bonjour

L'exemple que je donne est une idée que j'ai eue, je ne sais pas si c'est bien, normal, réalisable ou autre puisque c'est ma question.

Peux-tu fournir un exemple sur lequel je pourrais m'appuyer pour réaliser ces controles ?

Merci
0
Réponse 10 / 10
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
8 mai 2008 à 22:54
Voilà 


<html>
<head>
<title>Test contrôle de champs "dynamiques"</title>
<style>
*
{
	font-size : 10pt;
	font-family : Arial;
}
</style>

<script>
	// Object controle d'un formulaire :  doit être un INPUT dans l'exemple
	function Controle(controlId, nom)
	{
		this.id = controlId;
		this.nom = nom;
	}

	// Object formulaire
	function Formulaire(formId, nom)
	{
		this.id = formId;
		this.nom = nom;		
		this.controles = new Array();
	}

	// Ajoute un contrôle au formulaire
	Formulaire.prototype.ajouter = function(controlId, nom)
	{
		this.controles[this.controles.length] = new Controle(controlId, nom);
	}


	// Vérifie que tous les contrôles du formulaire sont renseignés
	// Retourne true si tous les contrôles sont renseignés sinon false et affiche un msg d'erreur
	Formulaire.prototype.verifier = function()
	{	
		var ok = true;
		for (var i=0; i < this.controles.length; i++)
		{
			var elt=document.getElementById(this.controles[i].id);
			// Pour le moment on ne teste que des champs de type INPUT
			switch (elt.tagName)
			{
				case "INPUT" :	
					ok = elt.value != "";
					break;
			} 
		
			if (!ok)
			{
				var msg = "Erreur dans "+this.nom+"\n\n";
				if (this.controles[i].nom) 
				{
					msg += "Le champ "+this.controles[i].nom+" doit être renseigné !";
				}
				else
				{
					msg += "Le champ identifié par "+this.controles[i].id+" doit être renseigné !";
				}
				alert(msg);
				break;
			}
		}
		return ok;
	}

	// Liste de formulaires
	function ListeFormulaire()
	{
		this.formulaires = new Array();
	}
	
	
	// Ajoute un formulaire à la liste
	ListeFormulaire.prototype.ajouter = function(formId, nom)
	{
		var formulaire = new Formulaire(formId, nom);
		this.formulaires[formId] = formulaire; 
		return formulaire;
	}

	// Raccourcit pour vérifier un formulaire
	// On pourrait aussi utiliser directement listeFormulaires.formulaires[formId].verifier() 
	ListeFormulaire.prototype.verifier = function(formId)
	{
		return this.formulaires[formId].verifier();
	}

// Objet global contenant tous les formulaires à vérifier
var listeFormulaires = new ListeFormulaire();

// Génère dynamiquement les infos pour les formulaires
<?php
for ($i=0; $i < 3; $i++)
{
	printf("formulaire = listeFormulaires.ajouter(\"%s\",\"%s\");\n","form".$i,"Formulaire ".$i);
	for ($j=0; $j< 4; $j++)
	{
		printf("formulaire.ajouter(\"%s\",\"%s\");\n","form".$i."_".$j,"Champ ".$j);
	}	
	echo "\n";
}	
?>

</script>
</head>
<body>
<?php
for ($i=0; $i < 3; $i++)
{
	printf("<p>Formulaire %s</p>\n",$i);
	printf("<form id=\"%s\" name=\"%s\" method=\"post\" action=\"\">\n","form".$i ,"form".$i);
	
	for ($j=0; $j< 4; $j++)
	{
		printf("Champ %s <input type=\"text\" id=\"%s\" name=\"%s\" size=\"5\" value=\"\">\n",$j,"form".$i."_".$j ,"form".$i."_".$j);
	}
	printf("<input type=\"button\" value=\"Vérifier\" onclick=\"%s\">\n","listeFormulaires.verifier('form".$i."')");
	echo "</form>";
	echo "</br>";
}	
?>
</body>
</html>
--

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
0

Discussions similaires

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses
Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses