generate textbox on every click of button

Posted by Rickeybglr under ASP.NET on 9/10/2012 | Points: 10 | Views : 6789 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Hi All,
1. I have one Text box (primary) and add button.
2. If i click add, one text box should be added + one delete button.
3. if i click add again, second text box should be added + one delete button.
and so on..
4. on clicking any delete button, the corresponding text box should get deleted.
5. The add button should be for only first text box.

Please provide me code for this.
or only for adding textboxes, iam new to Javascript.
u can consider the scenario of sharing thoughts in facebook

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Ranjeet_8 on: 9/11/2012 [Member] [MVP] Gold | Points: 25

0	look at this url http://geekswithblogs.net/dotNETvinz/archive/2009/08/09/adding-dynamic-rows-in-asp.net-gridview-control-with-textboxes-and.aspx Rickeybglr, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Vasanthmvp on: 9/11/2012 [Member] Starter | Points: 25

0	Hi, Look at this example: Here, on click a new text box gets generated by using javascript. Append the delete button functionality to it. Here Iam presenting you a sample code. Try to Improve this. .aspx page: <script type="text/javascript" language="javascript"> function generatetb() { document.getElementById("p1").innerHTML = "<input type=\"text\" id=\"t1\" />" } function addElement(tag_type, target,parameters) { var newElement = document.createElement(tag_type); document.getElementById(target).appendChild(newElement); ButtonCreation(tag_type, target, parameters); } function ButtonCreation(tag_type, target, parameters) { var newElementdel = document.createElement(tag_type); if (typeof parameters != 'undefined') { for (parameter_name in parameters) { newElementdel.setAttribute(parameter_name, parameters[parameter_name]); } } document.getElementById(target).appendChild(newElementdel); } function deletetextbox(id) { document.getElementById(id).setAttribute('disabled', 'false'); } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="targetTag"></div> <asp:button ID="button" runat="server" OnClick="AddDelButton" OnClientClick="addElement('INPUT','targetTag',{id:'my_button_tag', name:'my_button_tag', type:'button', value:'del',onclick:'deletetextbox(this.id)'}); return false;" Text="Add TextBox Tag" /> <asp:Button ID="btn" runat="server" Text="Generate TextBox" OnClientClick="generatetb" /> <asp:Panel ID="p1" runat="server" /> </div> </form> </body> If you dont find clarity, let me know. Regards, Awesome Coding !! :) Rickeybglr, if this helps please login to Mark As Answer. \| Alert Moderator

Hi,
Look at this example:
Here, on click a new text box gets generated by using javascript. Append the delete button functionality to it.
Here Iam presenting you a sample code. Try to Improve this.

.aspx page:


<script type="text/javascript" language="javascript">



        function generatetb() {

            document.getElementById("p1").innerHTML = "<input type=\"text\" id=\"t1\" />"

        }





        function addElement(tag_type, target,parameters) {

            var newElement = document.createElement(tag_type);

            document.getElementById(target).appendChild(newElement);

            ButtonCreation(tag_type, target, parameters);

        }



        function ButtonCreation(tag_type, target, parameters) {

            var newElementdel = document.createElement(tag_type);

                        if (typeof parameters != 'undefined') {

                            for (parameter_name in parameters) {

                                newElementdel.setAttribute(parameter_name, parameters[parameter_name]);

                            }

                        }

             document.getElementById(target).appendChild(newElementdel);

        }

        function deletetextbox(id) {

            document.getElementById(id).setAttribute('disabled', 'false');

        }





    </script>



</head>

<body>

    <form id="form1" runat="server">

    <div>



    <div id="targetTag"></div>



    <asp:button ID="button" runat="server" OnClick="AddDelButton" OnClientClick="addElement('INPUT','targetTag',{id:'my_button_tag', name:'my_button_tag', type:'button', value:'del',onclick:'deletetextbox(this.id)'}); return false;" Text="Add TextBox Tag" />



    <asp:Button ID="btn" runat="server" Text="Generate TextBox"  OnClientClick="generatetb" />

    <asp:Panel ID="p1" runat="server" />



    </div>

    </form>

</body>

If you dont find clarity, let me know.

Regards,

Awesome Coding !! :)

Rickeybglr, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vikash on: 9/11/2012 [Member] Starter | Points: 25

0	Hi friend below is your html file <div id="TextBoxContainer"> <!--Textboxes will be added here --> </div> <input id="btnAdd" type="button" value="Add More" onclick="AddTextBox()" /></asp:Panel> And below is your Javascript file <script type="text/javascript"> function GetDynamicTextBox(value){ return '<input name = "DynamicTextBox" type="text" size="39px" value = "' + value + '" />' + '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />' } var count=0; function AddTextBox() { if(count<=2) { var div = document.createElement('DIV'); div.innerHTML = GetDynamicTextBox(""); document.getElementById("TextBoxContainer").appendChild(div); count++; } } function RemoveTextBox(div) { document.getElementById("TextBoxContainer").removeChild(div.parentNode); count--; } function RecreateDynamicTextboxes() { var values = eval('<%=Values%>'); if (values != null) { var html = ""; for (var i = 0; i < 3; i++) { html += "<div>" + GetDynamicTextBox(values[i]) + "</div>"; } document.getElementById("TextBoxContainer").innerHTML = html; } } window.onload = RecreateDynamicTextboxes; </script> i am overconfident it will work & mark as answer, if not reply back... Best regard vikash pathak Regards, Vikash Pathak Rickeybglr, if this helps please login to Mark As Answer. \| Alert Moderator

Hi friend
below is your html file
<div id="TextBoxContainer">


</div>
<input id="btnAdd" type="button" value="Add More" onclick="AddTextBox()" /></asp:Panel>
And below is your Javascript file
<script type="text/javascript">
function GetDynamicTextBox(value){
return '<input name = "DynamicTextBox" type="text" size="39px" value = "' + value + '" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'

}
var count=0;
function AddTextBox()
{

if(count<=2)
{
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
count++;
}

}

function RemoveTextBox(div)
{
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
count--;
}

function RecreateDynamicTextboxes()
{
var values = eval('<%=Values%>');
if (values != null)
{
var html = "";
for (var i = 0; i < 3; i++)
{
html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
}
document.getElementById("TextBoxContainer").innerHTML = html;
}
}
window.onload = RecreateDynamicTextboxes;
</script>

i am overconfident it will work & mark as answer, if not reply back...
Best regard
vikash pathak

Regards,
Vikash Pathak

Rickeybglr, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 9/13/2012 [Member] Starter | Points: 25

0	see this link http://www.aspdotnet-suresh.com/2012/07/create-controls-dynamically-in-aspnet.html Thanks & Regards Hari Rickeybglr, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts