Geek Answers Handbook

Dynamically add text box using jquery

What is wrong with this code? Only the first adding and removing links works ...

<html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <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'> <div id="TextBoxDiv1"> <TR><TD><input type='textbox' id='textbox1' ></TD>&nbsp;<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> </div> </div> </body> </html>
+4
source share
3 answers

When linking the click () handler, there is only one Add link on the page for linking. Use live () to capture click events for elements that are not yet on the page:

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

Working demo: http://jsfiddle.net/u9hvp/

+9
source

The use of live () was amortized and removed from the Andy E. page. The same functionality is now supported using the following syntax:

$ (document) .on ("click", ".removeButton", function () {

+1
source

you just add this file to your folder, its work is great ...!

Jquery-1.3.2.min.js

0
source

More articles:


All Articles