Здравствуйте,
задача такая: пишу скрипт (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();" />';
