$(document).ready(function () { var counter = 2; $("#addButton").click(function () { // if (counter > 10) { // alert("Only 10 textboxes allow"); // return false; // } var str='<label style="padding-left: 25px;"><%=GetGlobalResourceObject("ResLanguage", "Width") + "*"%> </label>' + '<input type="text" style="width: 75px; margin-left: 40px;" TextMode="SingleLine" class="txtBox" placeholder="cm" >' + '<label style="margin-left: 20px;"><%=GetGlobalResourceObject("ResLanguage", "Height") + "*"%> </label>' + '<input type="text" style="width: 75px; margin-left: 44px; " name="textbox' + counter + '" id="txtHeight' + counter + '" value="" class="txtBox" >' + '<label style="margin-left: 24px;"><%=GetGlobalResourceObject("ResLanguage", "Lenght") + "*"%> </label>' + '<input type="text" style="width: 75px;margin-left: 40px;" placeholder="cm" TextMode="SingleLine" name="textbox' + counter + '" id="txtLength' + counter + '" value="" class="txtBox" >' + '<label style="margin-left: 24px; clear: both"><%=GetGlobalResourceObject("ResLanguage", "Weight") + "*"%> </label>' + '<input type="text" TextMode="SingleLine" style="width: 75px;margin-left: 38px;" name="textbox' + counter + '" id="txtWeight' + counter + '" value="" class="txtBox" placeholder="kg" > '+ "<br />" + "<br />"; $("#TextBoxesGroup").append(str); counter++; }); $("#removeButton").click(function () { alert(counter); if (counter == 1) { alert("No more textbox to remove"); return false; } counter--; $("#TextBoxDiv1" + counter).remove(); }); $("#getButtonValue").click(function () { var msg = ''; for (i = 1; i < counter; i++) { msg += "\n Width #" + i + " : " + $('#txtWidth' + i).val(); msg += "\n Height #" + i + " : " + $('#txtHeight' + i).val(); msg += "\n Length #" + i + " : " + $('#txtLength' + i).val(); msg += "\n Weight #" + i + " : " + $('#txtWeight' + i).val(); } alert(msg); }); });
<div id='TextBoxesGroup' style="border: 1px solid; overflow-y: auto; height: 90px; border-radius: 5px; border-color: #ccc;padding-removed 10px; margin-removed 10px; margin-removed -30;width: 800px; font: Arial; font-size: small;"> <div id="TextBoxDiv1"> </div> <input type='button' value='+' id='addButton' class="btnNew" style="float: right"> <input type='button' value='-' id='removeButton' style="float: right" class="btnNew"> <input type='button' value='Get' id='getButtonValue'>
$("#removeButton").click(function () { $("#TextBoxesGroup input:text:last").remove(); $('#TextBoxesGroup label:last').remove(); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)