javascript - 从表单文本字段获取值

Question

当单击表单中的“添加记录”按钮时，我动态创建了一个表单。新表单已创建并分配给一个 div，渲染此表单后我无法获取文本框中的任何值。

在测试时，我尝试了多种方法来获取表单和元素，但它返回未定义。表单的名称是“addrec_form”。

我试过了

var address1 = document.forms.addrec_form.address.value
var address1 = document.forms['addrec_form'].elements['address'] 

将其分配给变量，然后使用 alert("value of address is: "+ address1)

所有这些返回的 document.forms.addrec_from 是未定义的。在使用 firebug 进行测试时，我设置了这个新表单的按钮 onclick，仅显示带有字符串的警报以用于测试目的，但是在调试时，尽管按钮 onclick 不是单击，但仍在渲染过程中，它会显示警报消息完成，一切看起来都不错，但无法访问表单中的值。

有人可以向我解释一下如何才能使其正常工作吗？我的代码可能有问题，但我确实查阅了我的书籍和示例，但我似乎无法弄清楚。

这是我的代码:

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

首先尝试精简代码，仅包含动态添加表单并获取文本框中的值，以便其他人更容易理解您的代码，并且还可以更轻松地调试代码。不要忘记备份原始代码。