Cannot Fire events on added Elements - Need Help v. Badly

[tvd]

Hi all,

I am a newbie. I have finally succeded in adding elements like lable, text box & buttons in a <div> elemet dynamically in script. But, the onclick event of te button doesnot work.

function createDrivePanel() {
    var odiv = document.getElementById("directDIV");
    var fromLbl=document.createElement("label");
    fromLbl.setAttribute("for", "drFrom");
    fromLbl.innerHTML="Drive From: ";
//    var toLbl=document.createElement("<label  for="drTo">Drive To: </label>");
  
    var dynamicForm=document.createElement("form");
    dynamicForm.setAttribute("id", "dynamicForm");
    dynamicForm.setAttribute("runat", "server");
    var fromTxt=document.createElement("input");
    fromTxt.setAttribute("type", "text");
    fromTxt.setAttribute("id", "fromTxt");
    fromTxt.setAttribute("value", "");
    var toTxt=document.createElement("input");
    toTxt.setAttribute("type", "text");
    toTxt.setAttribute("id", "toTxt");
    toTxt.setAttribute("value", "");
    var getDirectionsBtn=document.createElement("input");
    getDirectionsBtn.setAttribute("type", "button");
    getDirectionsBtn.setAttribute("id", "getDirectionsBtn");
    getDirectionsBtn.setAttribute("value", "Get Directions");
//    getDirectionsBtn.setAttribute("onClick", "GetDirections");
//    getDirectionsBtn.setAttribute("onClick", "GetDirections()");
    getDirectionsBtn.setAttribute("onclick", "GetDirections(" + fromTxt.value + ", " + toTxt.value +")");
//    getDirectionsBtn.attachEvent("onclick", "GetDirections(" + fromTxt.value + ", " + toTxt.value +")");
    alert("all elements Inits");  
    dynamicForm.appendChild(fromLbl);
    dynamicForm.appendChild(fromTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
//    frm.appendChild(toLbl);
    dynamicForm.appendChild(toTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(getDirectionsBtn);
    odiv.insertBefore(dynamicForm, lbl);    
//    document.getElementById('directDIV').innerHTML = odiv;
}


function GetDirections(from, to) {
    
//    ResultsPanel.Controls.Add("Drive From " + from + "Drive To " + to);
//    alert("Drive From " + document.getElementById('fromTxt') + "Drive To " + document.getElementById('toTxt')); 
    alert("Drive From " + from + "Drive To " + to); 
}

I tried different ways to access the GetDirection method, but couldnot get it, Their is no error message. Also can I retrive text box value in getDirections by document.getElement....

I am in very bad shape & need to fix it asap.
I believe, I am not doing anything incorrect, technically. If such a thing is not possible what could be the other alternative. I am using IE 6.

Any help is appreciated. Hope you guys will be able to help me out.

Thanks

Trupti

[jscheuer1]

As far as I can tell, your code to create the form doesn't really do anything. I cannot get it to attach anything to a page. As a result, I cannot really troubleshoot the event assignment. I can tell you that you can do things like so:

var el=whatever;  //this could be an existing element or one you create.
var getVal=function(){alert(document.forms['form_name'].elements['element_name'].value);}  //this sets up a function in the same scope as the onclick assignment that will use it.
el.onclick=getVal;  //this assigns the function to the element.

[tvd]

Thanks a lot. Your this solution helped me achve what I wanted - call another function . I saved both the values of text boxes in a local var & called the function passing those 2 var. Thanks.

But now, If I want to remove thse or any other entered elements - NOT all elements. How do I do this. Suppose, I want to remove these all entered elements only and add other ones. How do I do it? Logic sh be, get list of all elements, read each, if it tis the one 1 don't want to delete - Ignore it, Else delete it.

Can you help me. I am trying to figure out this using documents.childNodes() and removeNode(childNode). But am not successful yet.

Thanks

[tvd]

I also want to add another text from another method. For that, previously, I just added text to the exsisting div.innerHTML. For this, I am using DoAlert(), It works well. The only problem is, it just shows up long as required. I want to dispaly it with scrollbars vertical. For that I wrote DoAlert1(). It gives me error on line textTA.innerHTML.

I have 2 options to solve out -
1) Remove all elements & add new form with just a textare.
2) Append a textarea to the dynamic form created in previous method

For 2nd point, the code is below. which fails on line textTA.innerHTML - Unknown Runtime Error

function DoAlert(text) {
    var d=document.getElementById("directDIV");
    d.style.visibility="visible";
    document.getElementById("directDIV").innerHTML += (text);
}

function DoAlert1(text) {
    var d=document.getElementById("directDIV");
    d.style.visibility="visible";
     var dynamicForm=document.createElement("form");
    dynamicForm.setAttribute("id", "dynamicForm");
    dynamicForm.setAttribute("runat", "server");
    
    var textTA=document.createElement("textarea");
    textTA.setAttribute("id", "textTA");
    textTA.setAttribute("overflow", "auto");
    textTA.setAttribute("rows", "30");
    textTA.innerHTML=text;

    dynamicForm.appendChild(textTA);
    d.insertBefore(dynamicForm, lbl);    
}

I will still need assistance to remove all elelemtns.
Hope to get help from you experts.

thanks

Trupti

[jscheuer1]

Whoa, one thing at a time. About removing nodes - looks like you are over complicating it. And, removeNode() is less standard than removeChild().

A simple way to use removeChild() is:

function killKid(obj){
obj.parentNode.removeChild(obj);
}