<html> <head> <title>jQuery add / remove textbox example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addButton").click(function () { if(counter>10){ alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'+ '<input type="button" value="Get TextBox Value" id="getButtonValue"/>' ); newTextBoxDiv.appendTo("#TextBoxesGroup"); counter++; }); $("#removeButton").click(function () { if(counter==1){ alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); function value(){ $("#getButtonValue").click(function () { alert('1234'); }); } }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> <input type='button' value='Add Button' id='addButton'> <input type='button' value='Remove Button' id='removeButton'> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="http://code.jquery.com/jquery-latest.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addButton").click(function () { if(counter>10){ alert("Only 10 textboxes allow"); return false; } var newTextBoxDiv = $(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter); newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'+ '<input type="button" value="Get TextBox Value" class="getButtonValue" onclick="alert(\'1234\');" />' ); newTextBoxDiv.appendTo("#TextBoxesGroup"); counter++; }); $("#removeButton").click(function () { if(counter==1){ alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv" + counter).remove(); }); }); </script> </head><body> <div id='TextBoxesGroup'> <div id="TextBoxDiv1"> <label>Textbox #1 : </label><input type='textbox' id='textbox1' > </div> </div> <input type='button' value='Add Button' id='addButton'> <input type='button' value='Remove Button' id='removeButton'> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง