2009-02-12 8 views
0

Je souhaite générer des zones de texte dynamiquement en fonction des entrées de l'utilisateur. Si l'utilisateur entre la valeur entière dans la zone de texte, s'il saisit 5 je veux générer 5 zones de texte. Ce code fonctionne dans Firefox mais ne fonctionne pas dans IE et Netscape; aidez-moi s'il vous plaît comment faire ceci ou signaler n'importe quelle autre erreur dans ce code à moi. En outre, la technologie que nous utilisons est Struts 2.
S'il vous plaît aidez-moi.générer dynamiquement des zones de texte à l'aide de JavaScript

code JavaScript:

function generate() 
{ 
    var tot = document.getElementById("totmob").value; 
    var tbl = document.getElementById("sim"); 

for(var i =1;i<=tot;i++) 
{ 
    tbl.innerHTML = 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n'; 
} 

Code HTML:

<td> 
<s:textfield id="totmob" label="Total Mobile Number" /> 
<td> 
<td> 
<input type="button" value="ADD" onclick="generate()"/> 
</td> 
</tr> 
</table> 
<div id="sim"> 
</div> 
+0

Votre code HTML n'est pas visible.S'il vous plaît changer tous vos tags de à

+0

un titre plus spécifique pour votre question aiderait les autres à vous aider. essayez également de formater votre code. – euge1979

Répondre

0

Pouvez-vous essayer quelque chose d'autre que InnerHtml - vous pouvez essayer ceci:

  • utilisation getElementByID pour obtenir l'élément que vous vouloir ajouter des zones de texte à
  • supprimer tout enfant existant i TEMS si nécessaire
  • Ajouter textboxes comme éléments enfant au nœud sélectionné
0

À partir de votre code javascript, il vous semble devez utiliser le code suivant:

tbl.innerHTML += 

au lieu de

tbl.innerHTML = 

à l'intérieur de la boucle for.

0

Le code ci-dessous fonctionne parfaitement avec IE et Firefox. Quand vous dites que ça ne marche pas, que voulez-vous dire?

function generate() 
{ 
    var tot = document.getElementById("totmob").value; 
var tbl = document.getElementById("sim"); 

for(var i =1;i<=tot;i++) 
{ 
    tbl.innerHTML = tbl.innerHTML +'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n'; 
} 

} 
</script> 
<body> 
<table> 
<tr> 
    <td> 
     <span>Total Mobile Number </span> 
     <input type="text" id="totmob" /> 
    <td> 
    <td> 
    <input type="button" value="ADD" onclick="generate()"/> 
    </td> 
</tr> 
</table> 
<div id="sim"> 
</div> 
</body> 
</html> 
+0

thanksit fonctionne maintenant –

+0

Naveen, Pouvez-vous partager ce qui a mal tourné et quel changement a résolu votre problème? – kalyang

2
for(var i =1;i<=tot;i++) 
{ 
    tbl.innerHTML = 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n'; 
} 

devrait être

for(var i =1;i<=tot;i++) 
{ 
    tbl.innerHTML += 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno> <br> \n'; 
} 

parce que vous devez ajouter au code HTML intérieur, plutôt que de le remplacer.

Vous avez également utilisé un <td> au lieu d'un </td >

+0

merci maintenant c'est le travail pour moi –

0

ajouter un identifiant unique au nom de l'entrée ou un identifiant unique à lui.

comme:

for(var i =1;i<=tot;i++) 
{ 
    tbl.innerHTML += 'Mobile No'+i+' <input type="text" size = "20" maxlength= "20" name= hoardingregister.mobileno'+i+'> <br> \n'; 
} 

ou vous mettez un id en elle comme:

id = "entrée" + i

0

Mais si vous changez la valeur dans la zone de texte sans rafraîchir la page plus de zones de texte ajoutent après la zone de texte précédemment ajoutée. Mais il est faux à chaque fois que nous modifions la valeur dans la zone de texte, seul le nombre de nouvelles zones de texte doit être ajouté au lieu de conserver les zones de texte précédentes. Pouvez-vous s'il vous plaît changer le codage selon les conditions que j'ai dites.

Questions connexes