Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about the implementation that how to create dynamically textboxes at runtime using jQuery. On the button click you can add textbox as per your requirement. Also you can remove the textbox if extra textbox added by you wrongly.
Code for HTML Page
Implimentation: On the HTML page there i will place three button controls for add and delete textboxes respectively with the id named ‘insert_button' as well as ‘romove_button' by the user. And also find the values or show the values of all the textboxes on the screen with the id named ‘show_values_textboxes'. Here I will also place a <div> tag with the id named ‘TextBoxesGroup’ and another one div inside this div with the id named TextBoxDiv1. Inside the both div tags I place the textbox. On the button click of add texbox, one more div will be created dynamically with the same values that are showing inside the div. On the button click of remove texbox, the last entered textbox will be deleted dynamically, it means that div created by the pressing of the add textbox will be deleted when user will press the button of remove textbox.
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>< input type ='textbox' id='textbox1' >
</div>
</div>
<input type='button' id='insert_button' value='Insert Texbox' />
<input type='button' id='remove_button' value='Remove Texbox' />
<input type='button' id= ‘show_values_textboxes' value='Get TextBox Value ' />
Here i am giving the complete code for HTML page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
<style type="text/css">
div
{
padding:12px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var count_texboxes = 2;
$("#insert_textbox").click(function () {
if(count_texboxes>10){
alert("Maximum 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + count_texboxes);
newTextBoxDiv.after().html('<label>Textbox #'+ count_texboxes + ' : </label>' +
'<input type="text" name="textbox' + count_texboxes +
'" id="textbox' + count_texboxes + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
count_texboxes++;
});
$("#remove_textbox").click(function () {
if(count_texboxes==1){
alert("No more textbox to remove");
return false;
}
count_texboxes--;
$("#TextBoxDiv" + count_texboxes).remove();
});
$("#show_values_textboxes").click(function () {
var msg = '';
for(i=1; i<count_texboxes; i++)
{
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Insert Texbox' id='insert_textbox'>
<input type='button' value='Remove Texbox' id='remove_textbox'>
<input type='button' value='Get TextBox Value' id='show_values_textboxes'>
</body>
</html>
Conclusion: In above code, I explained that implementation that how to create dynamically textboxes at runtime using jQuery. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
No comments:
Post a Comment