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;
}
}
function GetDynamicTextBox(value) {
var id = 0;
id = id + 1;
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) + ' )" />'
}
function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = div.innerHTML + GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
function RemoveTextBox(div, formid, eml) {
alert(div)
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();
function validateEmail(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);
}
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.