JQuery add / remove Text-Box example Dynamically

Following are steps to create a dynamic input fields

1.HTML Code

$(document).ready(function(){
var increment=2;
$(“#addButton”).click(function(){
if(increment > 5)
{
alert(increment);
return false;
}
// two methods
// first memthod…we can write div element
var maincontent=”Textbox #”+increment+” :
“;
var fun=”<div id=’TextBoxDiv”+increment+”‘>”+maincontent+”</div>”;
//$(“#TextBoxesGroup”).append(fun);
//second method
// here jquery through create div element
var newTextBoxDiv = $(document.createElement(‘div’)).attr(‘id’, ‘TextBoxDiv’ +increment);
newTextBoxDiv.after(”).html(maincontent);
$(newTextBoxDiv).appendTo(“#TextBoxesGroup”);
increment++;
});
$(“#removeButton”).click(function () {
if(increment==1){
alert(“No more textbox to remove”);
return false;
}
increment–;
$(“#TextBoxDiv” + increment).remove();
});

$(“#getButtonValue”).click(function () {
var msg = ”;
for(i=1; i&lt;increment; i++){
msg += &quot;\n Textbox #&quot; + i + &quot; : &quot; + $(‘#textbox’ + i).val();
}
alert(msg);
});
});

<div id=’TextBoxesGroup’>
<div id=”TextBoxDiv1″>
Textbox #1 :
</div>
</div>

that`s it.... 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s