GetElementById не хочет работать в динамической форме
Здравствуйте,
задача такая: пишу скрипт (cms Joomla + mod_html) с динамической формой для заказа продукции: первая строка таблицы с 5 элементами (каждый в своей ячейке)(первый из них список SELECT, изначально пустой), остальные обычные TEXT. Первую и изначально единственную строку выводит php, у SELECT'a стоит обработчик события onChange=calc("номер строки"), которая от выбранного OPTION'a заполняет TEXT'ы Хотел реализовать при помощи js увеличение количества идентичных строк для заказа продукции. Все получилось - одна проблема, функция calc() для динамически созданной строки не работает: ругается на отсутствие созданных элементов. Есть какие-нибудь советы?) Впринципе, могу тупо написать все на пхп со всеми вытекающими... Обидно, что почти доделал... var products = new Array( "Выберите продукт|0|0", "Борщ|60|120", "Солянка|60|120", "Гороховый|60|100"); function fill_pro(input) { if (document.getElementById(input)) { for (var i=0; i < products.length; i++) { var newOpt = document.createElement("OPTION"); var tmp = products[i].split("|"); newOpt.value = products[i]; newOpt.text = tmp[0]; (document.getElementById(input).options.add) ? document.getElementById(input).options.add(newOpt) : document.getElementById(input).add(newOpt, null); } } } function calc(a) { var line = "product"+a.toString(); if (document.getElementById(line).selectedIndex > 0) { var tmp = products[document.getElementById(line).selectedIndex].split("|"); document.getElementById("fasovka"+a).value = tmp[1]; document.getElementById("vmeste"+a).value = tmp[2]; if (document.getElementById("mest"+a).value > 0) { document.getElementById("ves"+a).value = (tmp[1]*tmp[2]*document.getElementById("mest"+a).value)/1000; } } } function new_str() { var counter = document.getElementById("counter"); var tbody = document.getElementById("zakaz_table").getElementsByTagName("TBODY")[0]; var row = document.createElement("TR"); var td1 = document.createElement("TD"); var select1 = document.createElement("SELECT"); select1.setAttribute("name","product"+counter); select1.setAttribute("id","product"+counter); select1.onchange = function() { calc(2); } td1.appendChild(select1); var td2 = document.createElement("TD"); var input2 = document.createElement("INPUT"); input2.setAttribute("type","text"); input2.setAttribute("name","fasovka"+counter); input2.setAttribute("id", "fasovka"+counter); input2.setAttribute("value", "0"); input2.setAttribute("disabled", "disabled"); input2.setAttribute("size", "4"); td2.appendChild (input2); var td3 = document.createElement("TD"); var input3 = document.createElement("INPUT"); input3.setAttribute("type","text"); input3.setAttribute("name","vmeste"+counter); input3.setAttribute("id", "vmeste"+counter); input3.setAttribute("value", "0"); input3.setAttribute("disabled", "disabled"); input3.setAttribute("size", "4"); td3.appendChild (input3); var td4 = document.createElement("TD"); var input4 = document.createElement("INPUT"); input4.setAttribute("type","text"); input4.setAttribute("name","mest"+counter); input4.setAttribute("id", "mest"+counter); input4.setAttribute("value", "0"); td4.appendChild (input4); var td5 = document.createElement("TD"); var input5 = document.createElement("INPUT"); input5.setAttribute("type","text"); input5.setAttribute("value", "0"); input5.setAttribute("disabled", "disabled"); input5.setAttribute("size", "4"); td5.appendChild (input5); var td6 = document.createElement("TD"); var input6 = document.createElement("INPUT"); input6.setAttribute("type","text"); input6.setAttribute("name","ves"+counter); input6.setAttribute("id", "ves"+counter); input6.setAttribute("value", "0"); input6.setAttribute("size", "4"); td6.appendChild (input6); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); row.appendChild(td5); row.appendChild(td6); tbody.appendChild(row); fill_pro("product"+counter); } echo '<form id="zakaz" name="zakaz" method="post" action="">'."\n"; echo '<table id="zakaz_table" border="1" cellpadding="5" cellspacing="1" style="">'."\n"; echo '<tr><td> </td><td>Фасовка, г.</td><td>Количество<br> в месте</td><td>Количество мест</td><td>Объем, см<sup>3</sup></td><td>Вес, кг.</td></tr>'; echo '<tr>'; echo '<td><select name="product1" id="product1" onChange="javascript: calc(1);"></select></td>'."\n"; echo '<td><input type="text" name="fasovka1" id="fasovka1" value="0" disabled="disabled" size="4" /></td>'."\n"; echo '<td><input type="text" name="vmeste1" id="vmeste1" value="0" disabled="disabled" size="4" /></td>'."\n"; echo '<td><input type="text" name="mest1" id="mest1" value="0" onChange="javascript: calc(1);" /></td>'."\n"; echo '<td><input type="text" name="ob" id="ob" value="0" disabled="disabled" size="4" /></td>'."\n"; echo '<td><input type="text" name="ves1" id="ves1" value="0" disabled="disabled" size="4"/></td>'."\n"; echo '</tr>'; echo '</table><input type="hidden" name="counter" value="2" /></form>'."\n"; echo '<script language="javascript">'; echo 'fill_pro("product1");'; echo '</script>'; echo '<input type="button" value="Добавить позицию" onClick="javascript: new_str();" />'; |
какая именно строка и что пишет (дословно)?
|
Для вот этого сгенерированного элемента
var counter = document.getElementById("counter"); var tbody = document.getElementById("zakaz_table").getElementsByTagName("TBODY")[0]; var row = document.createElement("TR"); var td1 = document.createElement("TD"); var select1 = document.createElement("SELECT"); select1.setAttribute("name","product"+counter); select1.setAttribute("id","product"+counter); select1.onchange = function() { calc(2); } td1.appendChild(select1); При наступлении события onChange, функция calc() вылетает с ошибкой (текст из opera 9.64): Event thread: change Error: name: TypeError message: Statement on line 27: Cannot convert undefined or null to Object Backtrace: Line 27 of inline#1 script in http://mercury/index.php/zakaz: In function calc if (document.getElementById(line).selectedIndex > 0) Line 50 of inline#1 script in http://mercury/index.php/zakaz function() { calc(2); } ... |
select1.setAttribute("id","product"+counter); window.opera.postError( "product"+counter ) // добавляем // эту строчку, смотрим в журнал ошибок // и думаем, почему не работает |
При нажатии на кнопку для добавления строки, появилось
Event thread: click productnull Такое впечатление что и вправду id корявые присваивает... Вроде бы все верно: var counter = document.getElementById("counter"); берет из echo '</table><input type="hidden" name="counter" value="2" /></form>'."\n"; |
Из названия getElementById вроде бы очевидно, что установлен должен быть id, а не name.
|
Да действительно так) Установил -- продолжает сопротивляться: теперь другой текст перед основной ошибкой:
Event thread: click product[object HTMLInputElement] |
У input надо еще value взять.
var counter = document.getElementById("counter").value; |
Ура. Работает. Спасибо огромадное)) Месяц без работы дома сижу, вот и решил покалымить, все таки не зря меня считают невнимательным.
|
Часовой пояс GMT +3, время: 08:22. |