input generé par js n est pas posté avec le reste du formulaire
Salutation amis developpeurs !
Je planche sur un problème depuis un certain nombre de temps maintenant et n'ayant trouvé nul solution je m'en remet à vous grands manitous du javascript.
voici mon problème: J'ai un formulaire d enregistement dans lequel je laisse l'utilisateur entrer un ou plusieur numero de telephone.
en fait dans ce formulaire, a chaque fois que l utilisateur clique sur une petite croix, un nouveau champ est crée.
le problème est que quand je post le formulaire , les champs que j ai généré avec javascript ne sont pas pris en compte ....
et c'est bien embetant comme vous pouvez l'imaginer.
Voici quelques bribes de mon code :
le formulaire ...
Code:
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
|
<form cible="index.php" enctype="multipart/form-data" name="addMember" method="post">
<table>
<tr>
<td> name </td>
<td><input type="text" size=20 name="name" onkeyup="javascript:checkName();"/><i id="nameCheck" class="important">*</i></td>
</tr>
<tr>
<td> firstname </td>
<td><input type="text" name="firstname" size=15 " onkeyup="javascript:checkFirstname();"/><i id="firstnameCheck" class="important">*</i></td>
</tr>
<td>Phones</td>
<td>
<table id="phone">
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<img heigh=18px width=18px src="images/add.jpg" style="color:red" alt="add a phone" title="click here to add a new phone line" onclick="Javascript:createNewPhone();" />
<img heigh=18px width=18px src="images/remove.png" style="color:red" alt="remove phone" title="click here to delete last phone line" onclick="Javascript:deletePhone();" /> (add or remove a phone line)
</td>
</tr>
</table>
</form> |
le javascript qui va avec :
Code:
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
|
function createNewPhone(){
var line= document.createElement("tr");
document.getElementById("phone").appendChild(line);
line.innerHTML="<td><input type=\"text\" name=\"PhoneNumber\" size=14 onchange=\"Javascript:checkPhone();\"/></td><td><select name=\"phoneType\" onchange=\"Javascript:checkPhone();\"><option value=\"mobile\">mobile</option><option value=\"home\">home</option><option value=\"desk\">desk</option><option value=\"undefined\">undefined</option> </select></td><td name=\"phoneCheck\" class=\"important\"> </td>";
}
function deletePhone(){
var phone = document.getElementsByName("PhoneNumber");
var line= phone[phone.length-1].parentNode.parentNode;
line.innerHTML="";
}
function checkPhone(){
var phone = document.getElementsByName("PhoneNumber");
var check = document.getElementsByName("phoneCheck");
var type = document.getElementsByName("phoneType");
var test=true;
//create the regular expression
var GlobalExp =/^\+?[0-9]{6,11}$/i;
var DeskExp =/^[0-9]{3}$/i;
var undefinedExp =/^[0-9]{3}|(\+?[0-9]{6,11})$/i;
for(cpt=0;cpt<phone.length;cpt++)
{
switch(type[cpt].value){
case "desk": Expression=DeskExp;break;
case "undefined": Expression=undefinedExp;break;
default: Expression=GlobalExp;break;
}
//chosing the regExp to use depending on the type chosen
if(Expression.test(phone[cpt].value)){
check[cpt].innerHTML="<img src=\"images/valid.gif\" />";
phone[cpt].style.backgroundColor="#CCFFCC";
}
else{
check[cpt].innerHTML="<img src=\"images/invalid.gif\" />";
phone[cpt].style.backgroundColor="#FFCCCC";
test= false;
}
}
return test;
} |
Bon l'affichage marche parfaitement hein
Quand je clique sur le bouton pour ajouter une ligne ca l'ajoute
quand je clique sur le bouton pour en supprimer ca l enleve.
Quand je check le code sur la page html j'ai bien ;
Code:
1
2
|
<input type="text" onchange="Javascript:checkPhone();" size="14" name="PhoneNumber"> |
mais quand je fais un var_dump de la variable post dans le fichier cible, pas d'index PhoneNumber ....
C'est vraiment surprennant ...
Si quelqu un a une solution je lui serais 100 fois redevable.
Bien à vous et merci d'avance !:aie:
