Javascript DOM创建的表单不工作

Javascript DOM创建的表单不工作,javascript,ajax,Javascript,Ajax,在谷歌搜索答案并开始使用javascript之后 我想不出这个 我在表单中单击“添加记录”按钮时动态创建了一个表单 新表单被创建并分配给一个div,一切正常。 呈现此表单后,我无法在文本框中获取任何值 在测试过程中,我尝试了很多方法来获取表单和元素,然后返回 未定义 表格名称为“addrec_form” 我试过了 } 函数genFooter(val,tbl2body) { var tr=document.createElement(“tr”) var td=document.createElem

在谷歌搜索答案并开始使用javascript之后 我想不出这个

我在表单中单击“添加记录”按钮时动态创建了一个表单

新表单被创建并分配给一个div,一切正常。 呈现此表单后,我无法在文本框中获取任何值

在测试过程中,我尝试了很多方法来获取表单和元素,然后返回 未定义

表格名称为“addrec_form”

我试过了 }

函数genFooter(val,tbl2body) { var tr=document.createElement(“tr”)

var td=document.createElement(“td”);
td.colSpan=“2”;
td.align=“右”;
td.vAlign=“底部”;
td.height=“35px”;
var btnCreateRec=document.createElement(“输入”);
btnCreateRec.type=“按钮”;
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”;返回false;};
btnCreateRec.onmouseout=function(){document.getElementById(“btnRec”).style.backgroundColor=“#416ADC”;返回false;};
//这就是将文本框数组传递给函数进行进一步处理的地方
//这是我搞不懂的
btnCreateRec.onmouseclick=function(){insertRequest(document.forms.addrec_form,'INSERT_ROW');};
td.appendChild(btncreatrec);
tr.appendChild(td);
tbl2body.appendChild(tr);
}

函数genLblBxs(值标识、tbl2body、框标识) { var tr=document.createElement(“tr”)

var td1=document.createElement(“td”);
setAttribute('noWrap','true');
td1.align=“left”;
td1.width=“15%”;
td1.vAlign=“基线”;
td1.style.padding=“0.5em 0.5em”;
var lbl=document.createTextNode(值\u id);
var font1=document.createElement(“字体”);
font1.style.color=“海军”;
font1.追加儿童(lbl);
value_id=value_id.toLowerCase();
var td2=document.createElement(“td”);
td2.align=“左”;
td2.style.padding=“0.5em 0.5em”;
var txtBox=document.createElement(“输入”);
txtBox.type=“text”;
txtBox.id=box\u id;
txtBox.name=box\u id;
txtBox.size=“37”;
txtBox.color=“海军”;
txtBox.style.border=“1px solid#C3D5FF”;
td1.追加子项(font1);
td2.追加子项(txtBox);
tr.appendChild(td1);
tr.appendChild(td2);
tbl2body.appendChild(tr);

}

首先尝试剥离代码,只包含表单的动态添加和文本框中的值,以使其他人更容易理解您的代码,也使您更容易调试代码。不要忘记备份原始代码。

首先尝试剥离代码,只包括动态添加表单和在文本框中获取值,以使其他人更容易理解您的代码,并使您更容易调试代码。不要忘记备份原始代码。

您是否尝试使用firebug(FF)来确定页面上是否存在javascript错误? 尝试调试并查看DOM树的视图。

是否尝试使用firebug(在FF中)确定页面上是否存在javascript错误?
尝试调试并查看DOM树的视图。

我尝试将代码复制并粘贴到定义了容器div的空页面上。它在几个缺少的函数(
whichBrs
browserDetect
)上失败,我想您已经在别处定义了这些函数。然后,就没有了我用
onclick
替换的
onmouseclick
。之后,它在IE8和FF3中工作正常:
alert(document.forms.addrec\u form.address.value)
insertRequest
中显示了我在地址字段中键入的内容。

我尝试将代码复制并粘贴到定义了容器div的空页面上。它在几个缺少的函数(
whichBrs
browserDetect
)上失败,我想您已经在别处定义了这些函数。然后,就没有了我用
onclick
替换的
onmouseclick
。在这之后,它在IE8和FF3中工作正常:
alert(document.forms.addrec\u form.address.value)
insertRequest
中显示了我在地址字段中键入的内容。

很抱歉提供了这么多代码,这是我第一次 请求帮助,我下次会更加努力的

谢谢大家的建议

最初,addRec()是由onclick在表单/表格中的按钮上调用的, 然后呈现此表单/表,onclick无法通过 文本框中的值

我设法使它工作如下:

创建了一个调用addRec()的函数,之后我添加了

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


再次感谢…

很抱歉提供了这么多代码,这是我第一次 请求帮助,我下次会更加努力的

谢谢大家的建议

最初,addRec()是由onclick在表单/表格中的按钮上调用的, 然后呈现此表单/表,onclick无法通过 文本框中的值

我设法使它工作如下:

创建了一个调用addRec()的函数,之后我添加了

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


再次感谢…

请将您发布的代码减少到显示问题的最小子集。没有人愿意费力地阅读成百上千行。检查document.forms.length之前和之后 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);