dynamically adding textboxes

[Abubacker Siddik]

Hi all,

I have a requirement to add text boxes in my web page when the user clicks a Button. I explain this very clearly. I have a text box to get "skill of an user". By defaut four text boxes have been given and at the end submit button is given. I have put another button called ADD next to submit button. If user wants to add extra skills, he must click the add button and then a new textbox should appear after the last text box entered. How to do using javascript?

[Bear Bibeault]

Where's your code? What have you tried so far?

[Frankey James]

Abubacker Siddik wrote:Hi all,

I have a requirement to add text boxes in my web page when the user clicks a Button. I explain this very clearly. I have a text box to get "skill of an user". By defaut four text boxes have been given and at the end submit button is given. I have put another button called ADD next to submit button. If user wants to add extra skills, he must click the add button and then a new textbox should appear after the last text box entered. How to do using javascript?

create a DIV element and assign it an ID where you want the box(es) to appear. use onclick event in ADD button and use AJAX to append the HTML needed in the created DIV container.

[Bear Bibeault]

Frankey James wrote:and use AJAX to append the HTML needed in the created DIV container.

Huh, why does Ajax need to be involved? Ajax is not necessary to dynamically create new elements in the DOM.

[Frankey James]

Bear Bibeault wrote:

Frankey James wrote:and use AJAX to append the HTML needed in the created DIV container.

Huh, why does Ajax need to be involved? Ajax is not necessary to dynamically create new elements in the DOM.

true - i guess i thought he would be reading data from a file, but i misunderstood.


so then:
"
create a DIV element and assign it an ID where you want the box(es) to appear. use onclick event in ADD button and use AJAX to append the HTML needed in the created DIV container. "

of course there are other ways.

[Abubacker Siddik]

Hi james, I dont understand how to append html in the div container. What do you mean by that?
Following is the code you want me to write?


<div id="skillset">
</div>

<input type="button" value="ADD" onclick="javascript:addSkills()"/>

function addSkills(){
//code to get the div element and set the textbox.
}


If so, How to add next skill if it is required??

[Zandis Murāns]

Create new HTML element (input) by

var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');

After that just add this element to div element:

document.getElementById('idDiv').appendChild(textbox);

Simple as that.

[Abubacker Siddik]

Thanks Zandis, It is very clear understandable code...


Abu.A