Javascript DOM created form not working

Question

After searching google for an answer and just starting using javascript I could not figure this one out...

I created a form dynamically when onclick a button "Add Record" in a form.

the new form is created and assigned to a div, all good. After rendering this form I can't get any of the values in textboxes.

while testing I tried many ways to get the form and elements and it returns undefined.

the name of the form is "addrec_form".

I tried

var address1 = document.forms.addrec_form.address.value var address1 = document.forms['addrec_form'].elements['address'] assigned it to a variable and then use alert("value of address is: " + address1) all this returns document.forms.addrec_from is undefined. while testing with firebug I set up the button onclick of this new form to just show an alert with just a string for testing purposes, but when debugging although the button onclick is not click is still in the process of rendering it displays the alert message then finishes and all looks okay but can't access the values in the form. Can some one explain to me how can I get this working? again I might have code something wrong, but I did consult my books and samples I can't seem to figure out out to get it working. this is my code: function addRec(){ var browserName = whichBrs();

//var outterDiv = 
document.getElementById("gridDiv").style.visibility="visible";  

if(document.getElementById("AddRecords").style.visibility == "hidden")
 {
  document.getElementById("AddRecords").style.visibility = "visible"
 }


var tbl  = document.createElement("table");
    tblbody = document.createElement("tbody");

 // applies the css to the element i.e. element is tbl class is list2
 browserDetect(tbl, "list2");

var tr1 = document.createElement("tr");
 tr1.style.background = "#e8edff";

var th1 = document.createElement("th");
 browserDetect(th1, "cancelimgX");

 tr1.appendChild(th1);

var img1 = document.createElement("img");
 img1.setAttribute("src", "images/close.png");
 img1.onclick = function(){setDivVisibility(); return false;};
 img1.setAttribute("title", "Close Window");
 img1.style.cursor="pointer";
 img1.style.height="16px";
 img1.style.border="0px"

 th1.appendChild(img1);

var tr2 = document.createElement("tr"); 
 tr2.style.background = "#e8edff";


var td1 = document.createElement("td");
 td1.style.padding = "0.5em 0.5em 0.5em 0.5em";


var fieldset1 = document.createElement("fieldset"); 
 fieldset1.style.padding = "0 0 0.5em 0";
 fieldset1.style.border = "1px solid #001685";
 fieldset1.style.background = "#e8edff";


var legend1 = document.createElement("legend");
 legend1.background = "#e8edff";


var legendtxt = document.createTextNode("Adding a Record");

var fontA = document.createElement("font");

 fontA.style.color = "#001685";
 fontA.style.fontWeight = "bolder";
 fontA.appendChild(legendtxt); 

 legend1.appendChild(fontA);

var form1 = document.createElement("form"); 
 form1.setAttribute("method", "post");
 form1.setAttribute("name", "addrec_form");
 form1.setAttribute("id", "addrec_form");

var tbl2 = document.createElement("table");
var tbl2body = document.createElement("tbody");
 browserDetect(tbl2, "tblAddRec");


var address1 = "Address";
var city1 = "City";
var hardware_number1 = "Hardware Number";
var hardware_status1 = "Hardware Status";
var software_status1 = "software Status";
var premise1 = "Premise";
var service_point1 = "Service Point";
var val = "Create Record";

 // creating labels and textboxes 
 genLblBxs(address1,tbl2body, "address");
 genLblBxs(city1,tbl2body, "city");
 genLblBxs(hardware_number1,tbl2body, "hardware_number1");
 genLblBxs(hardware_status1,tbl2body, "hardware_status1");
 genLblBxs(software_status1,tbl2body, "software_status1");
 genLblBxs(premise1,tbl2body, "premise");
 genLblBxs(service_point1,tbl2body, "service_point");

 genFooter(val, tbl2body);

 tbl2.appendChild(tbl2body);
 form1.appendChild(tbl2);
 fieldset1.appendChild(legend1);
 fieldset1.appendChild(form1);
 td1.appendChild(fieldset1);
 tr2.appendChild(td1); 
 tblbody.appendChild(tr1);
 tblbody.appendChild(tr2);

 tbl.appendChild(tblbody);
var addrecorddiv = document.getElementById("AddRecords");
 addrecorddiv.appendChild(tbl);

}

function genFooter(val, tbl2body) { var tr = document.createElement("tr");

var td = document.createElement("td");
 td.colSpan = "2";
 td.align="right";
 td.vAlign="bottom";
 td.height = "35px";

var btnCreateRec = document.createElement("INPUT"); 
 btnCreateRec.type="button";
 btnCreateRec.id = "btnRec";
 btnCreateRec.name = "btnRec";
 btnCreateRec.value = val;
 btnCreateRec.style.color = "#FFFFFF";
 btnCreateRec.style.border = "1px solid";
 btnCreateRec.style.backgroundColor = "#416ADC"; 
 btnCreateRec.height = "20";

 btnCreateRec.onmouseover = function(){ document.getElementById("btnRec").style.backgroundColor = "#001685"; return false;};
 btnCreateRec.onmouseout = function(){ document.getElementById("btnRec").style.backgroundColor = "#416ADC"; return false;};


 // THIS IS WHERE PASSING THE ARRAY OF TEXTBOXES IS PASSED TO A FUNCTION FOR FURTHER PROCESSING 
 // THIS IS WHAT I CAN'T FIGURE OUT
 btnCreateRec.onmouseclick = function(){insertRequest(document.forms.addrec_form, 'INSERT_ROW');};


 td.appendChild(btnCreateRec);
 tr.appendChild(td);
 tbl2body.appendChild(tr);

}

function genLblBxs(value_id, tbl2body, box_id) { var tr = document.createElement("tr");

var td1 = document.createElement("td");
 td1.setAttribute('noWrap','true');
 td1.align="left";
 td1.width="15%";
 td1.vAlign="baseline";
 td1.style.padding = "0.5em 0 0 0.5em";

var lbl = document.createTextNode(value_id);
var font1 = document.createElement("font");

 font1.style.color = "navy";
 font1.appendChild(lbl);


 value_id = value_id.toLowerCase(); ;

var td2 = document.createElement("td");
 td2.align = "left";
 td2.style.padding = "0 0.5em 0 0.5em";

var txtBox = document.createElement("INPUT"); 
 txtBox.type="text";
 txtBox.id =box_id;
 txtBox.name = box_id;
 txtBox.size = "37";
 txtBox.color = "navy";
 txtBox.style.border = "1px solid #C3D5FF";

 td1.appendChild(font1);   
 td2.appendChild(txtBox);

 tr.appendChild(td1);
 tr.appendChild(td2);

 tbl2body.appendChild(tr);

}

Answer 1

Try stripping down your code first to just include the dynamic adding of the form and getting the values in the textbox to make your code easier for everybody else to understand and it will also make it easier for you to debug your code. Don't forget to backup the original code.

Answer 2

Did you try using firebug(in FF) to determine if there are javascript errors on your page? Try debugging and looking at the DOM tree in its views.

Answer 3

I tried copying and pasting your code onto an empty page with a container div defined. It failed on a couple of missing functions (whichBrs and browserDetect), which I presume you have defined elsewhere. Then, there's no such thing as onmouseclick, which I replaced with onclick. After that it worked ok in IE8 and FF3: alert(document.forms.addrec_form.address.value) within insertRequest showed me whatever I typed into the address field.

Answer 4

I apologize for providing so much code, this is my first time requesting for assistance, I'll be more diligent next time.

Thanks to all for your suggestions.

Originally the addRec() was called by onclick on a button in a form/table, then this form/table was rendered and the onclick was not working to pass the textboxes values.

I managed to get it working as follows:

Created a function to call addRec(), after that I added

document.getElementById("btnRec").onclick = function(){insertRequest(document.forms.addrec_form, 'INSERT_ROW');};

Thanks again...