As a Backend End Developer, you may required dynamic creation of button and textbox simultaneously in website development which having form submission information , for like we want that user have to submit their skills in resume , so let we assume we didn’t know actually how many textbox we will define in our form by default for submission of skills , so we want that user will come to our resume registration form and their he/she will get the option to add number of skill as they want , so in this case we have to create this stuff dynamically , So now question arises how we can achieve this target before submission of form or on client side.
So my friends i am presenting you the way of creation of buttons and textbox simultaneously using
JavaScipt which is well known scripting language in our industry (IT) and this is also fast to process and provide results quickly.Now i am going to present the basic steps to achieve our goal , lets start with step first.
In step-1 , i am going to create an
index.html file where i will define a basic html for our goal as mention below the code presentation of my
In the above code
I define a basic html for my file
index.htmlIn folder under my system drive like
D:by folder name
example_1and place this
I also create a folder name
example_1and place file by name
Now , i will discuss about both of the file what these will do , so first move on
index.html , file basically present the view of our example, when we hit this file in our browser whatever just like in chrome , in body part of this html
i create a button control which call a java script function
addButton when we click on it , this function i will later define on our
script.js file in
js folder of this
example_1 folder and a blank div where all our dynamic control will appear after script called as a button and text box control.
Are you ok till now, is everything clear now, If it is fine than i will move to my next step of for this blog.
So lets start with next step by name step-2
In step-2 , i will define the function
script.js file , which will dynamically add controls to our html blank div , having id attribute
Code for script.js is below :
addButton will called , as defined above this function will dynamically create all four element and append to our html blank div by id
object_data respectively textbox, button, and two break lines , and append as much controls as much or how many times i will hit the add new button.
So, how you feel now my friends ,is its easier for you all to create all this stuff, now if you understand all this i wanna move to my next step of my blog by name step-3 which will present you the way how you can get the values of each dynamically created text box on button click.
so as you know , as i write earlier in above code a
showMessage function will call as you click on dynamically created button , this function will do the rest of the work for step-3
Code for showMessage function :
for any query , please comment me or feedback me for this blog , how do you like this.