While clicking on button I want to add that 4 lables and textboxes below the panel.that 4 controls should recreate in each button by using javascript. I am new to the javascript.Please help me..
4 Answers
Hope this work and you never mind jQuery I guess
$('.button').on('click', function(){
$('.appnd-class').append("<label> Name </label> <input type='text'/><label> Age </label> <input type='text'/><label> Address </label> <input type='text'/><label> Office </label> <input type='text'/>")
});
Comments
You create them before. As default you set their visibility as "hide". In the button action you call a javascript function, which sets the visibility as visible.
Just answer, if you need more direction for this.
4 Comments
KJaeg
I thought, he in fact does know, what textboxes he want to show. Above he posted a picture with package informations for packages, which are going to be sent by a parcel service (in German). It looked to me, that he just wanted to show them after a certain event (button click). Would it really be inefficient to set them as visible? I would think, that appending more information to the innerHtml or anything else would use more resources.
brunofitas
He does know what fields to add, but every line represents a package, right? So by hiding the lines, you would limit the number of packages one may send, I guess.
brunofitas
but hiding is also an option, and much faster, if you know how many lines you may have
KJaeg
I thought so, too. But the longer I read his description, the more I think, that we misunderstood him. Maybe you are right, and he has multiple lines for packages. In that case, I think, that he distinguishes different package types, we have here. Then he just has a couple of lines, which amount is known. But know I think, that what he really want is, that the button refreshes the textfields by every button click. I think, he accidently used the word "recreate" for refresh. But I am stil unsure, what he really wants to achieve.
I usually save things like this as templates and then add them to the page...
var template = ""+
"<select id='etc'>" +
"<option value='one'>One</option>"+
...
"</select>"
then just add them to the page
$("#button").click(function(){
$( template ).appendTo($("#thedivyouwant") );
});
Comments
Try below
<div id="div1"></div>
<input type="button" id="mybutton" />
javascript
$(document).ready(function () {
$("#mybutton").click(function () {
document.getElementById("div1").innerHTML="<input type='textbox' />"
});
});
Like this you can add what all controls you want in your Ui
If you need pure javascript then
<div id="div1"></div>
<input type="button" id="mybutton" onclick="myfun()"/>
then javascript
function myfun()
{
document.getElementById("div1").innerHTML="<input type='textbox' />"
}
if you need to arrange the output shown in picture then you need to include your label and textbox inside a table. then it will looks like that
3 Comments
Arunprasanth K V
@jithesh why not ?? just use a loop and process your controls via loop and use id corresponding to loop parameter , example just fix an id first like "mytextbox" then just append loop variable to the end like mytextbox+your loop parameter variable
Arunprasanth K V
@jithesh let me know if you have any doubts
Arunprasanth K V
@jithesh If the above answer is working for you then make it as correct answer then somebody in future can refer it