Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hello experts,
I have a few javascript functions using which i am adding/deleting text box dynamically.
Following are the functions used.
<pre lang="cs"><script type="text/javascript" language="javascript">
    function pagevalid() {
        if (document.getElementById("ctl00_ContentPlaceHolder1_txtform").value == "") {
            alert("Form Name should be entered");
            document.getElementById("ctl00_ContentPlaceHolder1_txtform").focus();
            return false;
        }
    }
 
    /*******************To Add Textbox and remove texbox for email address at runtime*******************************/
 
    function GetDynamicTextBox(value) {
          var id = 0;
        id = id + 1;
 
        //alert(value)
        var formid = eval('<%=formid%>');
 

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

    function RemoveTextBox(div, formid, eml) {
    alert(div)
        //alert(document.getElementById("TextBoxContainer").text.toString())
        if (confirm('Are you sure you want to remove the id??')) {
            alert(eml);
            document.getElementById("TextBoxContainer").removeChild(div.parentNode);
            PageMethods.Delete(formid, eml);
        }
 
    }
 
    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();
 
    /*Validate Email*/
    function validateEmail(email) {
        //alert(email)
        var splitted = email.match("^(.+)@(.+)$");
        alert(splitted)
        if (splitted == null) return false;
        if (splitted[1] != null) {
            var regexp_user = /^\"?[\w-_\.]*\"?$/;
            if (splitted[1].match(regexp_user) == null) return false;
        }
        if (splitted[2] != null) {
            var regexp_domain = /^[\w-\.]*\.[A-Za-z]{2,4}$/;
            if (splitted[2].match(regexp_domain) == null) {
                var regexp_ip = /^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/;
                if (splitted[2].match(regexp_ip) == null) return false;
            } // if
            return true;
        }
 
        if (document.getElementById("ctl00_ContentPlaceHolder1_txtform").value == "") {
            alert("Form Name should be entered");
            document.getElementById("ctl00_ContentPlaceHolder1_txtform").focus();
            return false;
        }
        return false;
    }
 

    //Called by JS
    pageMethodConcept = {
        callServerSideMethod: function () {
            //aPageMethods.Delete(3, 4, pageMethodConcept.callback);
 
            // I am passing 3 and 4 to get sum and set callback method
        },
        callback: function (result) {
            alert(result);
        }
    }
    //window.onload = pageMethodConcept.callServerSideMethod;
</script>
 
Using the following code i am populating the text boxes.
CdataTable = ObjBussiness.admin_select_FormEmail(formid, "1", source).Tables[0];
        if (CdataTable.Rows.Count != 0)
        {
 
            string str;
 

            int cnt = CdataTable.Rows.Count;
            string[] textboxValues = new string[CdataTable.Rows.Count];
            for (int i = 0; i < cnt; i++)
            {
                textboxValues[i] = CdataTable.Rows[i]["email"].ToString();
            }
 
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            this.Values = serializer.Serialize(textboxValues);
 
            str = "<script language="'javascript'">RecreateDynamicTextboxes()</script>";
            ClientScript.RegisterStartupScript(this.GetType(), "javascript", str);
 
        }
 

This method is used to remove the text box added dynamically by clicking the add button
[System.Web.Services.WebMethod]
    public static string Delete(string formid, string email)
    {
        try
        {
            string source = ConfigurationManager.ConnectionStrings["pep"].ToString();
            bussinessacesslayer bussiness = new bussinessacesslayer();
            bussiness.admin_Delete_FormEmail(formid, "1", email, source);
            //string str = "sder";
        }
        catch (Exception e)
        {
 
        }
        return "Deleted";
    }
I am able to delete the text box if its is populated at server side. If i click the add button i am able to add a text box but when i click on remove button it is giving an error saying "getElementById(..) is null or object.."
I did a bit of google but could not find a solution.
This is my add button
 <input id="btnAdd" type="button" value="" onclick="AddTextBox()"  style="background-image:url(adminimages/Plus.jpeg); width: 19px; background-repeat: repeat; height: 19px; background-color: transparent;" />
 
Suppose i have two values in DB, then my text box are initialized with these values. Now if i click on remove, the function works fine but if i click on "add button" a textbox is added but, now when i click on the remove button it does not work.
Please help.
I am using IE 8.
Posted 7-Jul-11 3:22am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

It's a lot of code, but my first thought is that there is something wrong with the client Id of the textbox. I'm not sure why you pass the DIV id etc either. document.getElementById(id) should be enough.
 
You're thought about generating the remove button with the txt box is a good idea, but make sure that value is not empty, if necessary generate a guid or seed or something.
 
Hope this helps.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 381
1 Praneet Nadkar 237
2 Marcin Kozub 225
3 Sergey Alexandrovich Kryukov 200
4 Shweta N Mishra 161
0 OriginalGriff 8,284
1 Sergey Alexandrovich Kryukov 7,327
2 DamithSL 5,614
3 Manas Bhardwaj 4,986
4 Maciej Los 4,920


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 7 Jul 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100