validation formulaire contenant input généré par javascript

**CedLeDebutant** · 03/10/2007, 17h33

Bonjour à tous,

Je suis un nouvel inscrit et après avoir parcourus ce forum en long, en large et en travers, j'ai trouvé que l'aide y était très abondante et pourquoi pas s'investir (autant pour moi que pour les autres !!!!).
Aujourd'hui je viens vers vous car je n'ai pas trouvé de solutions à mon problème. Il se peut meme que je sois le seul à l'avoir

Ce probleme ne survient que sur Firefox.
J'ai un formulaire dans lequel un bouton appelle une fonction javascript qui elle permet d'ajouter autant d'inputs que necessaire à ce formulaire. Une fois ceux ci renseignés, vous validez le formulaire et j'affiche la valeur de chaque input au début de ma page.
Le probleme c'est que sous Firefox seul l'input deja présent dans la page me renvoie sa valeur alors que ceux généré par le javascript ne renvoie pas (ils n'existe meme pas pour firefox).
voici le code de la fonction en javascript:

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
function addNewCurse(){
	divListeCurse = document.getElementById("listeCurse");
 
	Div = document.createElement("div");
	newAttach = document.createElement("input");
	newAttach.setAttribute("name","newcours[]");
	newAttach.setAttribute("type","text");
	Div.appendChild(newAttach);
 
	remLink = document.createElement("a");
	remLink.appendChild(document.createTextNode("Delete"));
	remLink.setAttribute("href","javascript:void(0)");
	remLink.setAttribute("onclick","remAttachment()");
	remLink.setAttribute("class","lien");
	remLink.setAttribute("className","lien");
	//ci dessous on est OBLIGE de mettre la fonction comme ça pour
	// des raisons de compatibilité IE...
	remLink.onclick=function(e){
		e=e||window.event;
		//taget = Ff et srcElement = IE
		var theTarget = e.target || e.srcElement;
		child = theTarget.parentNode;
		divListeCurse = document.getElementById("listeCurse");
		divListeCurse.removeChild(child);
	};
	Div.appendChild(remLink);
	divListeCurse.appendChild(Div);
	//divListeCurse.insertBefore(Div,divListeCurse.childNodes[0]);
}

Voici une partie du code de la page contenant le formulaire :

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
function cycleAdmin(){
 
$_SESSION['errorMessage']='';
 
if (isset($_POST['action'])){
	if (!isset($_POST['newcours']))
		$_SESSION['errorMessage'].='Veuillez renseigner au moins un nom de cours<br />';
	else{
		for($i=0; $i<count($_POST['newcours']);$i++)
			echo $_POST['newcours'][$i]." ";
}
$html="<table cellpadding=0 cellspacing=0 width=100%>
	<form action='' method='post'>
		<input type='hidden' name='part' value='cycle'>
		<input type='hidden' name='action' value='newcycle'>
		<tr>
			<td><div id='listeCurse'><input type='text' name='newcours[]' value=''><input type='button' onclick='addNewCurse();' value='Add an other curse'></div></td>
		</tr>
		<tr><td><input type='submit' value='OK'></td></tr>
	</form>
	</table>";
return $html;
}

Je vous remercie d'avance pour votre aide.

PS : Je voudrais quand meme signaler que ce code marche tres bien sous IE alors que la plupart du temps c'est l'inverse, non ???

**CedLeDebutant** · 03/10/2007, 20h39

En fait je peux vous réduire le code pour que ça marche dans un seul meme fichier index.php.
Dont voici le code :

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
<?php
$html = '<html>
<head>
        <script type="text/javascript">
                function addNewCurse(){
                        divListeCurse = document.getElementById("listeCurse");
                        
                        Div = document.createElement("div");
                        newAttach = document.createElement("input");
                        newAttach.setAttribute("name","newcours[]");
                        newAttach.setAttribute("type","text");
                        Div.appendChild(newAttach);
                        
                        remLink = document.createElement("a");
                        remLink.appendChild(document.createTextNode("Delete"));
                        remLink.setAttribute("href","javascript:void(0)");
                        remLink.setAttribute("onclick","remAttachment()");
                        remLink.setAttribute("class","lien");
                        remLink.setAttribute("className","lien");
                        //ci dessous on est OBLIGE de mettre la fonction comme ça pour
                        // des raisons de compatibilité IE...
                        remLink.onclick=function(e){
                                e=e||window.event;
                                //taget = Ff et srcElement = IE
                                var theTarget = e.target || e.srcElement;
                                child = theTarget.parentNode;
                                divListeCurse = document.getElementById("listeCurse");
                                divListeCurse.removeChild(child);
                        };
                        Div.appendChild(remLink);
                        divListeCurse.appendChild(Div);
                        //divListeCurse.insertBefore(Div,divListeCurse.childNodes[0]);
                }
        </script>
</head>
<body>';
if (isset($_POST['action'])){
        if (!isset($_POST['newcours']))
                echo 'Veuillez renseigner au moins un nom de cours<br />';
        else{
                for($i=0; $i<count($_POST['newcours']);$i++)
                        echo $_POST['newcours'][$i]." ";
        }
}
$html .="<table cellpadding=0 cellspacing=0 width=100%>
        <form action='' method='post'>
                <input type='hidden' name='part' value='cycle'>
                <input type='hidden' name='action' value='newcycle'>
                <tr>
                        <td><div id='listeCurse'><input type='text' name='newcours[]' value=''><input type='button' onclick='addNewCurse();' value='Add an other curse'></div></td>
                </tr>
                <tr><td><input type='submit' value='OK'></td></tr>
        </form>
        </table>
</body>
</html>";
echo $html;
?>

Meme apres avoir épuré le code de cette maniere je n'ai toujours pas plus d'une valeur d'affichée dans le resultat.

Alors si vous avez ne serait ce qu'une idée je suis preneur

merci d'avance.

**CedLeDebutant** · 04/10/2007, 12h40

C'est cool...pour la premiere fois que je pose un probleme, je suis le seul à en trouver une solution qui vous me direz n'en n'est pas vraiment une. La voici :
La seule facon pour moi de reccupérer les valeurs de mon formulaire est de ne mettre que des input de meme "name" sinon ça ne passe pas

En clair j'ai du scinder en deux mon formulaire qui je vous l'accorde ne fait pas tres propre mais à l'avantage de fonctionné !!!! c'est déjà ça lol.

**SpaceFrog** · 04/10/2007, 13h04

en redefinissant dynamiquement le type submit du bouton submit du form après ajout d'elements dynamique, les éléments ajoutés dynamiquements sont pris en compte pas php ..

**CedLeDebutant** · 04/10/2007, 13h31

Merci pour ton post SpaceFrog mais... que veux tu dire par redefinir dynamique ment le type submit de mon bouton form ???
ne serait ce pas cela :

Code :

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

onclick='document.forms.nomduform.submit()'

si tu suggeres cela alors je me mets tout de suite au travail

car ça ferais plus propre quand meme !
merci d'avance.

**SpaceFrog** · 04/10/2007, 13h41

Non je dis juste

si par exemple tu as dasn ton form un bouton submit :

Code :

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

<input id='monsubmit' type='submit' value='valider' />

après avoir ajouté dynamiquement tes éléments

tu fais

Code :

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

document.forms['monform'].getElementById('monsubmit').type ='submit'

de plus évite setattribute ...

Code :

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

1
2
3
newAttach = document.createElement("input");
newAttach.setAttribute("name","newcours[]");
newAttach.setAttribute("type","text");

préfère lui la syntaxe:

Code :

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

1
2
3
newAttach = document.createElement("input");
newAttach.name="newcours[]";
newAttach.type="text";

**CedLeDebutant** · 04/10/2007, 13h55

Ok. Merci pour tout tes conseils.
Je m'y met de suite

A+.

validation formulaire contenant input généré par javascript

JavaScript

Discussions similaires

Partager

Partager