Javascript DOM erstellt Form nicht

Question

Arbeits

Nach google Suche nach einer Antwort und gerade erst anfangen, mit Hilfe von Javascript Ich konnte diesen heraus nicht verstehen ...

ich ein Formular dynamisch erstellt, wenn Onclick eine Schaltfläche „Add Record“ in a bilden.

Das neue Formular wird erstellt und einem div zugewiesen, alles gut. Nach dem Rendern dieses Formulars kann ich keine der Werte in Textfeldern abrufen.

während des Testens Ich habe versucht, viele Möglichkeiten, um das Formular und die Elemente zu erhalten und es undefined zurückgibt.

Der Name des Formulars ist "address_formular".

ich versuchte

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

}
 

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

}
 

Funktion 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

Versuchen Sie den Code Strippen nach unten zuerst enthalten nur die Dynamik der Form hinzugefügt und die Werte in der Textbox bekommen Sie den Code für alle leichter zu machen, sonst zu verstehen, und es wird auch machen Es ist einfacher für Sie, Ihren Code zu debuggen. Vergessen Sie nicht, den ursprünglichen Code zu sichern.

Answer 2

Haben Sie versucht, mithilfe von Firebug (in FF) festzustellen, ob JavaScript-Fehler auf Ihrer Seite vorhanden sind? Versuchen Sie, den DOM-Baum in seinen Ansichten zu debuggen.

Answer 3

Ich habe versucht, kopieren und fügen Sie Ihren Code auf eine leere Seite mit einem Container div definiert. Es fehlgeschlagen einige Fehlfunktionen (whichBrs und browserDetect), die Sie vermutlich anderswo definiert haben. Dann gibt es keine onmouseclick, die ich durch onclick ersetzt habe. Danach funktionierte es in IE8 und FF3: alert(document.forms.addrec_form.address.value) innerhalb insertRequest zeigte mir was auch immer ich in das Adressfeld eintippte.

Answer 4

Ich entschuldige mich für die Bereitstellung so viel Code, das ist mein erstes Mal um Hilfe, ich werde das nächste Mal fleißiger sein.

Vielen Dank an alle für Ihre Vorschläge.

Ursprünglich war die AddRec() von Onclick auf eine Schaltfläche in einem Formular/Tabelle genannt wurde, dann diese Form/table wurde gemacht und die Onclick funktionierte nicht die Textfelder Werte zu übergeben.

schaffte ich es zum Laufen zu bringen, wie folgt:

eine Funktion Erstellt AddRec() aufrufen, danach habe ich

document.getElementById ("btnRec") hinzugefügt Onclick = function() {insertRequest. (document.forms.addrec_form, 'INSERT_ROW');};

Nochmals vielen Dank ...