asp.net js controlID动态增加

Question

I want to increase ASP controlID each time I click button. Like adding more phone numbers. Each time new asp:textbox is added, new ID should be created. Adding more div/textbox is working fine, but ID of each textbox is same.

 function GetDynamicMobileNo(value) { return '<div><asp:TextBox ID="txtAddMoreNumber" runat="server" CssClass="form-control" MaxLength="11" Placeholder="Mobile No"></asp:TextBox></div></br>'; } function AddMobileNo() { var div = document.createElement('DIV'); div.innerHTML = GetDynamicMobileNo(""); document.getElementById("MobileNoContainer").appendChild(div); } 

Anyone can help?

Answer 1

Id is same because you are generating html with the same Id.

//Here is your problem
function GetDynamicMobileNo(value) {
        return '<div><asp:TextBox ID="txtAddMoreNumber" runat="server" CssClass="form-control" MaxLength="11" Placeholder="Mobile No"></asp:TextBox></div></br>';
    }

    function AddMobileNo() {        
        var div = document.createElement('DIV');
        div.innerHTML = GetDynamicMobileNo("");
        document.getElementById("MobileNoContainer").appendChild(div);

    }

Change it to this code

function GetDynamicMobileNo(value, id) {
        return "<div><asp:TextBox ID=\" + id + \" runat=\"server\" CssClass=\"form-control\" MaxLength=\"11\" Placeholder=\"Mobile No\"></asp:TextBox></div></br>";
    }

    function AddMobileNo() {        
        var div = document.createElement('DIV');
        div.innerHTML = GetDynamicMobileNo("", someRandomIdGenerator());
        document.getElementById("MobileNoContainer").appendChild(div);

    }