Javascript DOM создал форму не работает

Question

После поиска Google для ответа и только начиная с использованием JavaScript я не мог понять это ...

Я создал форму динамически при OnClick кнопки «Добавить запись» в форма.

новая форма создана и назначена на div, все хорошо. После рендеринга этой формы я не могу получить ни одно из значений в текстовых окнах.

Во время тестирования я пробовал много способов получить форму и элементы, и он возвращает undefined.

название формы: «addrec_form».

Я попытался

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

}
 

функцию genFooter (VAL, tbl2body) 
{
вар тр = 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); 
 

}
 

функция genLblBxs (value_id, tbl2body, box_id) 
{
вар тр = 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

Попробуйте зачистки вниз код первым, чтобы просто включить динамическое добавление формы и получать значения в текстовом поле, чтобы сделать код более легким для всех остальных, чтобы понять, и это будет также сделать вам легче отлаживать ваш код. Не забудьте создать резервную копию исходного кода.

Answer 2

Вы пытались использовать firebug (в FF), чтобы определить, есть ли на вашей странице ошибки javascript? Попробуйте отладить и посмотрите на дерево DOM в своих представлениях.

Answer 3

Я попытался скопировать и вставить код на пустую страницу с определенным контейнером div. Он потерпел неудачу по нескольким недостающим функциям (whichBrs и browserDetect), которые, как я полагаю, вы определили в другом месте. Тогда нет такой вещи, как onmouseclick, которую я заменил onclick. После этого он работал нормально в IE8 и FF3: alert(document.forms.addrec_form.address.value) в пределах insertRequest показал мне все, что я ввел в поле адреса.

Answer 4

Приносим извинения за предоставление большого количества кода, это мой первый раз с просьбой о помощи, я буду более прилежен в следующий раз.

Спасибо всем за ваши предложения.

Первоначально addRec() был назван OnClick на кнопке в виде/таблицы, затем эта форма/таблица была оказанной, и OnClick не работает, чтобы передать значения TextBoxes.

мне удалось получить его работу следующим образом:

создал функцию для вызова addRec(), после того, что я добавил

document.getElementById ("btnRec") OnClick = функция() {insertRequest. (document.forms.addrec_form, 'INSERT_ROW');};

Еще раз спасибо ...