Dynamically add textbox using jquery

How can I dynamically add the textbox's if add is selected?

<div id='TextBoxesGroup'>
                        <asp:Literal id="Rep" Text="Rep-"   runat="server" />
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:Literal id="Literal4" Text="Distance:"   runat="server" />
                       &nbsp;<asp:TextBox ID="TextBox4" Width="30" runat="server"></asp:TextBox>
                        <asp:Literal id="min6" Text="Min:"   runat="server" /> 
                     <asp:TextBox ID="min7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox>
                        <asp:Literal id="sec6" Text="Secs"   runat="server" /> 
                     <asp:TextBox ID="sec7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div>

Open in new window


Thanks
runnerjp2005Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
runnerjp2005Author Commented:
will  newTextBoxDiv.html accept  <asp: ?
0
 
YZlatCommented:
not sure what do you mean...

Do you mean will it work with ASP.NET? I do not see why not
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
YZlatCommented:
just tested it and it worked great for me.

I just save your div to an .html file
<div id='TextBoxesGroup'>
                        <asp:Literal id="Rep" Text="Rep-"   runat="server" />
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:Literal id="Literal4" Text="Distance:"   runat="server" />
                       &nbsp;<asp:TextBox ID="TextBox4" Width="30" runat="server"></asp:TextBox>
                        <asp:Literal id="min6" Text="Min:"   runat="server" />
                     <asp:TextBox ID="min7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox>
                        <asp:Literal id="sec6" Text="Secs"   runat="server" />
                     <asp:TextBox ID="sec7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div>

and added the JQuery from the link to my html page and it works great
0
 
runnerjp2005Author Commented:
JQuery from the link to my html page and it works great

how did you do this>
0
 
YZlatCommented:
save this as an html page and see for yourself. Just make sure that in the folder where you save the html file you have a directory called js where you need to put the latest jquery file names jquery.js

<HTML>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready( function(){
	var counter = 2;

    $(".addButton").click(function () {

 if(counter>5){
            alert("Only 5 textboxes allow");
            return false;
 }   

 var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

 newTextBoxDiv.html('<TABLE><TR><TD>' +
'<input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD><TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR></TABLE>');

 newTextBoxDiv.appendTo("#TextBoxesGroup");


 counter++;
     });

     $(".removeButton").click(function () {
 if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

 counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

 var msg = '';
 for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
 }
       alert(msg);
     });

});

</script>
</head>
<body>

 <div id='TextBoxesGroup'>
                        <asp:Literal id="Rep" Text="Rep-"   runat="server" />
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<asp:Literal id="Literal4" Text="Distance:"   runat="server" />
                       &nbsp;<asp:TextBox ID="TextBox4" Width="30" runat="server"></asp:TextBox>
                        <asp:Literal id="min6" Text="Min:"   runat="server" /> 
                     <asp:TextBox ID="min7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox>
                        <asp:Literal id="sec6" Text="Secs"   runat="server" /> 
                     <asp:TextBox ID="sec7" Text="00" Width="30" MaxLength="2" runat="server"></asp:TextBox><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a>
                      </div> 
</body>
</HTML>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.