Win a copy of Modern JavaScript for the Impatient this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

dynamically adding textboxes

 
Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Marshal
Posts: 67446
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Where's your code? What have you tried so far?
 
Ranch Hand
Posts: 50
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Marshal
Posts: 67446
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 50
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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??
 
Ranch Hand
Posts: 174
Java ME Opera Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Create new HTML element (input) by

After that just add this element to div element:

Simple as that.
 
Abubacker Siddik
Ranch Hand
Posts: 90
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Zandis, It is very clear understandable code...


Abu.A
    Bookmark Topic Watch Topic
  • New Topic