Javascript: не могу найти вновь добавленные входные данные формы в DOM - PullRequest
Новая
       3

Javascript: не могу найти вновь добавленные входные данные формы в DOM

0 голосов
/ 31 декабря 2010

Я могу только предположить, что я делаю что-то не так, потому что когда я перехожу через JavaScript, он вообще не может найти объект.

То, что я пытаюсь сделать, это динамически добавлять строки со списками в таблицу. Код поля со списком более или менее не имеет значения, потому что попытка найти вновь сгенерированные входные данные в DOM, пройдя через форму, похоже, не работает. Я не уверен, что они вообще существуют.

Сначала у меня есть сама форма: 

<form name="WEB070EDIT" action="WEB070" method="POST">

Затем, ниже, есть таблица, которая будет содержать сгенерированные ячейки: 

<table id='Form2Section2' width="100%" border=0 cellspacing=0 cellpadding=2>
<tr class="woborder">
<th >5. Material or Process Name</th>
<th >6. Specification Number</th>
<th >7. Code</th>
<th >8. Special Process Supplier Code</th>
<th >9. Customer Approval Verification</th>
<th >10. Certificate of Conformance Number</th>
</tr>
</table>

Чуть выше есть моя отвратительная функция скрипта, которая заполняет таблицу: 

<script type="text/javascript">
function addForm1(itemId)
{
 if (typeof addForm1.counter == 'undefined') {
 addForm1.counter = 1;
 }
 var object = document.getElementById(itemId);
 var curRow = object.insertRow(-1);
 curRow.className = "woborder";
 curRow.style.backgroundColor = "#D0D0D0";
 var curCell = curRow.insertCell(-1);

 var cellElem = document.createElement("text");
 cellElem.size = 25
 cellElem.value = ""
 cellElem.name = "V_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "V_P2_MATERIAL_"+ addForm1.counter;

 var newAttr = document.createAttribute("onKeyUp");
 newAttr.nodeValue = "...[some lengthy script stuff trimmed for readability]...";
 cellElem.setAttributeNode(newAttr);

 curCell.appendChild(cellElem);

 curCell.appendChild(document.createElement("br"));

 cellElem = document.createElement("hidden");
 cellElem.name = "P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "P2_MATERIAL_" + addForm1.counter;
 cellElem.value = "";

 curCell.appendChild(cellElem);

 cellElem = document.createElement("select");
 cellElem.name = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.size = 10;

 newAttr = document.createAttribute("onClick");
 newAttr.nodeValue = "...[more script stuff here we don't care about]...";

 eval("document.getElementById('V_P2_MATERIAL_" + addForm1.counter + "').focus();");
 eval("combohandleKeyUp('WEB070EDIT','MYSELECT_P2_MATERIAL_" + addForm1.counter + "','V_P2_MATERIAL_" + addForm1.counter + "','P2_MATERIAL_" + addForm1.counter + "',MYLIST_P2_MATERIAL,MYDESCLIST_P2_MATERIAL,9999999);");

}

</script>

Причина, по которой нас не волнуют onClick и onKeyUp, заключается в том, что мы никогда не доходим до этой точки. Предполагается, что eval () должен запускать некоторый javascript, который заполняет поля со списком некоторыми предопределенными переменными. Это работает отлично, пока входы являются статическими. Однако, когда я нажимаю кнопку, которая запускает этот сценарий, он запускает этот combohandleKeyUp в самом начале, где он должен найти следующий объект: 

document.forms['WEB070EDIT'].elements["P2_MATERIAL_1"]

Очевидно, что это все переменные внутри самого скрипта, но это то, что он анализирует в соответствии с отладчиком.

Когда я использую DOM-инспектор Firebug, я могу найти формы, найти WEB070EDIT, но не могу найти скрытый ввод P2_MATERIAL_1. Статические вещи все есть, но ничего, что генерируется динамически. Это просто не работает с динамическими объектами? Я что-то пропустил? Я строю это совершенно неправильно?

1 Ответ

1 голос
/ 31 декабря 2010

Я вижу различные проблемы здесь.

Я не понимаю, почему вы используете eval(). Вещи, которые вы просматриваете, можно назвать просто старым JavaScript. Первый eval() можно удалить и заменить простым вызовом .focus() для элемента, как только он будет добавлен в DOM.

Что вы ожидаете от этого? 

document.createElement("text");

Это создает тег <text> в HTML, но это недопустимый тег. Вы пытаетесь сделать что-то подобное? 

document.createElement("input");
cellElem.type = 'text';
//...

Вы устанавливаете атрибут size, поэтому я предполагаю, что вы пытаетесь создать <input type="text" .../>.

Вы инициализируете addForm1.counter, но вы никогда не увеличиваете его. Таким образом, вы получите одинаковые идентификаторы, что приведет к скрежетанию зубов и различным путаницам.

Вы создаете <select>: 

cellElem = document.createElement("select");

и затем выбросьте его, если не хотите добавлять его в DOM. Вы также создаете атрибут onClick сразу после <select>, но не добавляете его ни к чему.

Я немного сократил ваш код и добавил некоторые вещи, которые вам не хватало, похоже, работает просто отлично: http://jsfiddle.net/ambiguous/3v6R3/

...