Multiple dynamic input text javascript

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.

What do you mean by completed? As soon as it has a single character in it? — Majid Fouladpour
– Majid Fouladpour, Commented Dec 17, 2012 at 11:19
i thing you should first make sure what you want to achieve. As i understood, you want to begin with a input-textbox and create another one, once the user clicks in it after he typed something in it. This is really strange behavior, why would you want that? And yes: of coursem, you would need an id. — nozzleman
– nozzleman, Commented Dec 17, 2012 at 11:26
@nozzleman, yes thats i want to achieve. why you say thats strange? — user1148875
– user1148875, Commented Dec 17, 2012 at 11:34
@nozzleman, This will be to user selected a range of numbers by using input-textboxs — user1148875
– user1148875, Commented Dec 17, 2012 at 11:35

Akhil Sekharan · Accepted Answer · 2012-12-17 12:50:53Z

2

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>

edited Dec 17, 2012 at 12:50

answered Dec 17, 2012 at 12:33

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1148875 Over a year ago

Im srry but im just testing this now. It works but firebug reports errors everytime i fill an input box: Error: Permission denied to access property 'toString' and

NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]

Gareth Cornish · Accepted Answer · 2012-12-17 11:36:44Z

2

HTML code:

<div id="inputcontainer">
    <input type="text" name="input0" id="input0" onkeyup="addInput();" />
</div>

And Javascript:

var currentindex = 0;
function addInput(){
    var lastinput = document.getElementById('input'+currentindex);
   if(lastinput.value != ''){
        var container = document.getElementById('inputcontainer');
        var newinput = document.createElement('input');
        currentindex++;
        newinput.type = "text";
        newinput.name = 'input'+currentindex;
        newinput.id = 'input'+currentindex;
        newinput.onkeyup = addInput;
        container.appendChild(newinput);
   }
}

This will add a new input to the list only when the last input is not empty.

http://jsfiddle.net/HJbgS/

answered Dec 17, 2012 at 11:36

Gareth Cornish

4,3411 gold badge21 silver badges22 bronze badges

2 Comments

user1148875 Over a year ago

: ) its really close that I was looking for. Thanks. Just one question, what should I change to "delete" the inputs if user cleared the text of it ?

Gareth Cornish Over a year ago

That'll make the whole thing much, much more complicated. I'd recommend leaving the extra box, and just ignore empty inputs on the server side.

Chris · Accepted Answer · 2012-12-17 11:28:28Z

0

Have a look at the onchange event on your text input field. You can use it, like you use onmousedown on your button.

See http://www.w3schools.com/jsref/event_onchange.asp for an example.

In your addInput() function you should then check if the input of the previous textfield is != "".

answered Dec 17, 2012 at 11:28

Chris

7,8268 gold badges54 silver badges103 bronze badges

Collectives™ on Stack Overflow

Multiple dynamic input text javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related