generate textbox on every click of button

Posted by Rickeybglr under ASP.NET on 9/10/2012 | Points: 10 | Views : 5053 | Status : [Member] | Replies : 4
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




Responses

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

Up
0
Down
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

Up
0
Down
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

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

Up
0
Down
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

Login to post response