Question

I have a form with a textbox. In that textboxes if I enter the number 5 and then hit the submit button 5 textboxes appear. This is all done in javascript. Here is the html code:

<form action="pag2.php" method="POST">
<table>
<tr>
    <td>
        <span>Cate intrebari va contine chestionarul?</span>
        <input type="text" id="nrintrebari"/>
    </td>
    <td>
    <input type="button"  value="Afiseaza intrebari" onclick="generate()"/>
    <input type="submit" value="Save & Return"/> 
    </td>
</tr>
</table>

<br><br>

<div id="sim">

</div>
</div>
</form>

and this is the Javascript code:

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

for(var i =1;i<=tot;i++)
{
  tbl.innerHTML  = tbl.innerHTML  +'Intrebare nr.'+ i +' <input type="text"  size = "150" maxlength= "200" name="intrebare[]" style="height:40px; background-color:#B8B8B8; " > <br><br><br> ';
}

}

Things are simple. The problem is that if enter the value 5, 5 textboxes appear and they are numbered like: 1 2 3 4 5. If i change the number and put 3 other 3 textboxes appear but they start numbering from 1 again. So i’ll have 8 textboxes but numbered like this: 1 2 3 4 5 1 2 3. How can I change that?? How can I make the numbering from 1 to 8 if I want to add first 5 textboxes and after 3.

Answer 1

add another variable which increments every time in for:

var lastI = 0;

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

    for(var i =1;i<=tot;i++){
        lastI++;
        tbl.innerHTML  = tbl.innerHTML  +'Intrebare nr.'+ lastI +' <input type="text"  size = "150" maxlength= "200" name="intrebare[]" style="height:40px; background-color:#B8B8B8; " > <br><br><br> ';
    }

}​

JSFiddle Example