naming text boxes 1

[ag1060]

Hello,

I'm really new to JavaScript and I found this script which creates/removes text boxes dynamically. It works except I want the name for each text box to be "stage 1", "stage 2", etc.

I can't seem to find a way to do it. I'm sure it's a small twist to it but any help?


----

<script type="text/javascript"> 
 
function addTxtBx(){
  
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');

newTxtBx.type = 'text';
newTxtbx.name= 'stage' -<< the problem

txtBxHolder.appendChild(newTxtBx);
}
 
function removeTxtBx(){
var allTxtBxs = document.getElementById('txtBoxHolder').getElementsByTagName('input');
if(allTxtBxs.length == 0){
alert('There are no stages to remove.');
}
else{
document.getElementById('txtBoxHolder').removeChild(allTxtBxs[allTxtBxs.length-1]);
}
 
}

 
</script> 
<div id="txtBoxHolder"></div> 
<input type="button" value="Add stage" onclick="addTxtBx()"> 
<input type="button" value="Remove stage" onclick="removeTxtBx()">

 

[vacunita]

Try:

<script type="text/javascript"> 
[red]var counter=0;[/red]
function addTxtBx(){
  
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');

newTxtBx.type = 'text';
newTxtbx.name= 'stage'[red]+ counter[/red] -<< the problem
[red]counter=counter+1;[/red]
txtBxHolder.appendChild(newTxtBx);
}
 
function removeTxtBx(){
var allTxtBxs = document.getElementById('txtBoxHolder').getElementsByTagName('input');
[red]counter=counter-1[/red];
if(allTxtBxs.length == 0){
alert('There are no stages to remove.');
}
else{
document.getElementById('txtBoxHolder').removeChild(allTxtBxs[allTxtBxs.length-1]);
}
 
}

 
</script>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[ag1060]

perfect. Thank You, Phil

 

[ag1060]

Phil, maybe you could suggest an approach for something else I want to add. I'm trying to add a checkbox next to it...something like this:

http://oi55.tinypic.com/2churn7.jpg

For the code, I tried making something similar to "txtBoxHolder" but it just displays far away from the textbox rather than next to it:

function addTxtBx(){
	
	var txtBxHolder1 = document.getElementById('txtBoxHolder1');
var newTxtBx1 = document.createElement('input');
  
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');




newTxtBx.type = 'text';
newTxtBx.name = 'stage' + counter;


newTxtBx1.type = 'checkbox';
newTxtBx1.name = 'stage' + counter;



counter=counter+1;

txtBxHolder.appendChild(newTxtBx); 
txtBxHolder1.appendChild(newTxtBx1); 

}

 

[vacunita]

Since your textboxes are being added to the txtboxholder div as they go, adding the checkboxes in a different (txtboxholder[red]1[/red]) div is bound to make them appear somewhere else.

Its like putting books in a box and then putting the book covers in another different box. They'll be in different places. Try putting them in the same div and just add a line break after them.

function addTxtBx(){

var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');
var newTxtBx1 = document.createElement('input');

newTxtBx.type = 'text';
newTxtBx.name = 'stage' + counter;

newTxtBx1.type = 'checkbox';
newTxtBx1.name = 'stage' + counter;

counter=counter+1;

txtBxHolder.appendChild(newTxtBx); 
[red]txtBxHolder[/red].appendChild(newTxtBx1); 
[red]txtBxHolder[/red].innerHTML+="<br>";
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[ag1060]

Thank You again