Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2009, 22:00
Новичок на форуме
Отправить личное сообщение для Игорёk Посмотреть профиль Найти все сообщения от Игорёk
 
Регистрация: 22.06.2009
Сообщений: 7

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>&nbsp;</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();" />';
Ответить с цитированием
  #2 (permalink)  
Старый 23.06.2009, 12:33
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

какая именно строка и что пишет (дословно)?
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2009, 12:40
Новичок на форуме
Отправить личное сообщение для Игорёk Посмотреть профиль Найти все сообщения от Игорёk
 
Регистрация: 22.06.2009
Сообщений: 7

Для вот этого сгенерированного элемента
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); }
...
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2009, 12:50
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

select1.setAttribute("id","product"+counter);
window.opera.postError( "product"+counter ) // добавляем
    // эту строчку, смотрим в журнал ошибок
    // и думаем, почему не работает
Ответить с цитированием
  #5 (permalink)  
Старый 23.06.2009, 13:14
Новичок на форуме
Отправить личное сообщение для Игорёk Посмотреть профиль Найти все сообщения от Игорёk
 
Регистрация: 22.06.2009
Сообщений: 7

При нажатии на кнопку для добавления строки, появилось
Event thread: click
productnull

Такое впечатление что и вправду id корявые присваивает... Вроде бы все верно:

var counter = document.getElementById("counter");

берет из
echo '</table><input type="hidden" name="counter" value="2" /></form>'."\n";
Ответить с цитированием
  #6 (permalink)  
Старый 23.06.2009, 13:15
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Из названия getElementById вроде бы очевидно, что установлен должен быть id, а не name.
Ответить с цитированием
  #7 (permalink)  
Старый 23.06.2009, 13:22
Новичок на форуме
Отправить личное сообщение для Игорёk Посмотреть профиль Найти все сообщения от Игорёk
 
Регистрация: 22.06.2009
Сообщений: 7

Да действительно так) Установил -- продолжает сопротивляться: теперь другой текст перед основной ошибкой:

Event thread: click
product[object HTMLInputElement]
Ответить с цитированием
  #8 (permalink)  
Старый 23.06.2009, 13:24
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

У input надо еще value взять.
var counter = document.getElementById("counter").value;
Ответить с цитированием
  #9 (permalink)  
Старый 23.06.2009, 13:27
Новичок на форуме
Отправить личное сообщение для Игорёk Посмотреть профиль Найти все сообщения от Игорёk
 
Регистрация: 22.06.2009
Сообщений: 7

Ура. Работает. Спасибо огромадное)) Месяц без работы дома сижу, вот и решил покалымить, все таки не зря меня считают невнимательным.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск