Question

Im having trouble creating multiple input texts with javascript.

My point is create a new input text everytime the input before is completed. (parent?)

Ive some code for comboboxs, but this time I need just input text box.

How can I do that ?

I’ve found this code:

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"text\" />";
}
</script>

<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>

But for my problem button is obsolete.

I think my event trigger will be something arround this “when user click in an input text box and it is != blank it creates a new one”.

I migth need some ID to identify every input text box.

Cheers.

Answer 1

JSBIn Demo

Guess this helps:

   <div id="myDiv">
        <input type="text" id="txt_1" onkeydown="newTextBox(this)" />
   </div>

<script type="text/javascript">

function newTextBox(element){
   if(!element.value){
       element.parentNode.removeChild( element.nextElementSibling);
       return;
   }
   else if(element.nextElementSibling)
       return;
    var newTxt = element.cloneNode();
    newTxt.id = 'txt_'+( parseInt( element.id.substring(element.id.indexOf('_')+1)) + 1);
    newTxt.value='';
    element.parentNode.appendChild(newTxt);
}  

</script>