Monday, 28 October 2013

Add Textboxes Dynamically and get the values

Hello Friends,
      Sometimes we need to add the textboxes dynamically and get the values from that.

first add the code at design side.

<ul>
     <li class="websiteadd">
                        <label for="user_category">
                            Websites<sup>*</sup></label>
                        <div class="inputbox" style="width: 320px; height: 28px;">
                            <asp:TextBox ID="txtWebSite" MaxLength="50" Style="height: 28px; width:210px;" runat="server"
                                CssClass="input-text wid text txtWebSite addwebsite"></asp:TextBox>
                            <asp:Button CssClass="add-btn" ID="btnAddnewWebsite" OnClientClick="return fnAddCustomWebsite();"
                                runat="server" Text="+Add" />
                        </div>
                    </li>
                    <li class="websitedelete">
                        <asp:Panel ID="panelWebSite" CssClass="panelWebSite" runat="server" Style="margin-left: 131px;">
                        </asp:Panel>
                    </li>
                </ul>

Then add the script in the head part

<script type="text/javascript">
function fnAddCustomWebsite() {
            var web = $(".addwebsite").val();
            var re = /^(www\.)[A-Za-z0-9_-]+\.+[A-Za-z0-9.\/%&=\?_:;-]+$/;
            if (!re.test(web)) {
                alert("Please Enter valid website name.");
                return false;
            }
            else {
                AddWeb++;
                var li_Web = $("<span></span>").append($("<div style='width: 320px; height:28px;'></div>").addClass("field-wrapper inputbox").append($("<input style='width: 220px; height:28px;' />").attr({ "id": "txtnewAddWeb" + AddWeb, "text": +web, "name": "txtnewAddWeb" + AddWeb }).val(web))
            .append($("<a></a>").attr({ "href": "javascript:void(0);", "class": "delete-amt", "style": "width:50px;" }).append("Delete").click(function () {
                $(this).parent().remove();
                return false;
            })));
                $(".panelWebSite").append($(li_Web));
                $(".addwebsite").val('');
                return false;
            }
        }
</script>


Then create the method to get the values as follows

public void AddWebSites()
        {
            try
            {
                UserWebsiteService objuserwebsiteservice = new UserWebsiteService();
               
                foreach (string key in Request.Params.AllKeys)
                {
                    if (key.Contains("txtnewAddWeb"))
                    {
                        string lblnewweb = Request.Params[key].ToString();
                        GEN_UserWebSite objNewWeb = new GEN_UserWebSite();
                        objNewWeb.CreatedBy = ProjectSession.UserID;
                        objNewWeb.CreatedDate = DateTime.Now;
                        objNewWeb.WebSiteName = lblnewweb.Trim();
                        objNewWeb.UserID = ProjectSession.UserID;
                        objuserwebsiteservice.InsertGEN_UserWebSite(objNewWeb);
                       
                    }
                }
            }
            catch (Exception ex)
            {
                ErrHandler.WriteError(ex);
            }
        }


Now call this function on submit button.

No comments:

Post a Comment