1

I am trying to add a new textbox when add button is onclick using JavaScript. Here is my HTML:

htmlStr += "<div id='filterContent' style='width:100%;text-align:center;'>";
htmlStr += "<input id='startLoc' type='text' />";
htmlStr += "<input id='endLoc' type='text' />";
htmlStr += "<input id='addLoc' type='button' value='Add' onClick='addTextBox()' />";
htmlStr += "</div><br/>";

And here is my JavaScript to add a new textbox when button is onClick:

function addTextBox(){
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
//element.setAttribute("style", "width:200px");

var foo = document.getElementById("filterContent");
foo.appendChild(element);
}

It works perfectly to add as many textbox as I want. But somehow the textbox created share the same id. I wonder is that possible to add many textbox with different ID each time when the button is onClick?

Thanks in advance.

Improve this question

2 Answers 2

Reset to default
3 
var aa=Math.random();   
 <input id='addLoc"+aa+"' type='text' />

User math.random to generate random id's for a textbox

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

1 Comment

+1 this is a great approach and doesn't rely on globals like mine, globals can be bad news (although I am a heretic and disagree that they are bad news in EVERY project).
1

Using your current setup you could keep track of an id increment in a global:

//outside function
var idIndex = 1;

function addTextBox(){
var element = document.createElement("input");

element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("id", "addLoc" + idIndex++);
element.setAttribute("style", "width:200px");

element.onclick = function()
{
    //do something
 }


var foo = document.getElementById("filterContent");
foo.appendChild(element);
}

EDIT: To answer the question in this answer's comments. It is certainly possible to add a different onclick handler for every new textbox (although you're probably better off designing your handlers so you can use a single handler for all but if you wanted for some reason to use a different one you could bind an anonymous function to the handler, I have added an approach above).

EDIT2: Regarding the second question in the path there are two approaches you could use. Instead of calling the separate functions getFirstPath() getSecondPath() etc. individually, you could have a single function called getPath() and pass the index to it as a parameter:

var getPath = function(index) {

    switch(index)
    {
        case 1:
            return getFirstPath();
            break;
        case 2:
            return getSecondPath();
            break; //and so on.
    }
}

And then your onclick would look like this:

element.onclick = function()
{
    getPath(index);
}
Improve this answer

6 Comments

Also, I wonder everytime when I created a new textbox, is that possible to set different onClick event to them? For example, I added textbox3 which will fire function3. And texbox4 fires function4 and so on.
Okay sure, thanks a lot. But one last question, I wanted to append the textbox to a new line everytime when the add button is onClick. I tried this approach: foo.appendChild("<br/>" + element); but it threw me an error message: Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
Also, sorry for keep asking questions. Can you please elaborate what am I supposed to do inside the onClick. Let's say addLoc1 will execute getFirstPath(). then addLoc2 will execute getSecondPath(). How should I add it in. Thanks in advance.
You're getting an error because <br/> is an element. You would need to do something like var lbreak = document.createElement("br"); foo.appendChild(element); foo.appendChild(lbreak);
Regarding your second question, there are a number of ways, you could redesign the getPath function to be less coupled to the path or if thats not an option, you might have to map those functions into an array and then reference the function based on the idIndex I'll put an example into my answer above
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.