Validate Dynamically added TextBox using JavaScript in ASP.Net

Last Reply on Feb 08, 2014 02:23 AM By Azim

Posted on Feb 07, 2014 10:40 PM

Hi,

I have a javascript function in a aspx page where it creates dynamic textboxes. How do I add an error message to say it is empty. Now, if it is empty and form submit is clicked I get "System.ArgumentOutOfRangeException: Length cannot be less than zero" error. Below is the javascript I have for adding textboxes. Really appreciate some help..Thanks


<script type="text/javascript">
    function GetDynamicTextBox(value) {
           return '<input name="DynamicTextBox" type="text" id="textbox1" maxlength="8" value = "' + value + '" onkeyup = "ValidateAddTime(this, event.keyCode)" onkeydown = "return ValidateAddTime(this, event.keyCode)" /> ' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
    }
    function AddTextBox() {
        if (document.getElementById("TextBoxContainer").childElementCount < 21) {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }
    }
    function RemoveTextBox(div) {
        document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        var lblmesg = document.getElementById("<%=lblMesg.ClientID%>");
        lblmesg.innerHTML = "";
    }
    function RecreateDynamicTextboxes() {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            for (var i = 0; i < values.length; i++) {
                html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
            }
            document.getElementById("TextBoxContainer").innerHTML = html;
        }
    }
    window.onload = RecreateDynamicTextboxes;
</script>

 

Posted on Feb 08, 2014 02:23 AM

Using this link reference

Create dynamic textbox using JavaScript in ASP.Net

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('[id*=btnPost]').click(function () {
                var count = $('[id*=TextBoxContainer]').find('div').length;
                for (var i = 0; i < count; i++) {
                    var name = $('[id*=TextBoxContainer]').find('div')[i].children[0].value;
                    if (name == '') {
                        alert('textbox cannot be empty');
                        break;
                    }
                }
            });
        });

    </script>
    <script type="text/javascript">
        function GetDynamicTextBox(value) {
            return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
                    '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
        }
        function AddTextBox() {
            var div = document.createElement('DIV');
            div.innerHTML = GetDynamicTextBox("");
            document.getElementById("TextBoxContainer").appendChild(div);
        }

        function RemoveTextBox(div) {
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
        }

        function RecreateDynamicTextboxes() {
            var values = eval('<%=Values%>');
            if (values != null) {
                var html = "";
                for (var i = 0; i < values.length; i++) {
                    html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
                }
                document.getElementById("TextBoxContainer").innerHTML = html;
            }
        }
        window.onload = RecreateDynamicTextboxes;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
    <br />
    <br />
    <div id="TextBoxContainer">
        <!--Textboxes will be added here -->
    </div>
    <br />
    <asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
    </form>
</body>
</html>

Thank You.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html