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);
}