Добавление части кода со скриптом без перезагрузки страницы

[avantus]

Есть поле в котором при начале ввода появляется список на Ajax. Как добавить еще одно или несколько таких полей без перезагрузки страницы?

Поле со скриптом:
<input type="text" id="pet[0]" name="pet[0]" style="width:200px" value="" />
<span id="indicator" style="height:11px; display:none;"><img src="images/1.gif" width="43" height="11" align="absmiddle" alt="Загрузка..." /></span>
<div id="pet_choices[0]" class="autocomplete"></div>

<script type="text/javascript">
new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});
</script>

Надо чтобы при добавлении новых полей [0] увеличивался, и потом при отправке формы можно было использовать массив pet[]

 

[xaens]

var n  = 0;
var id;
function add()
{
  var field = document.createElement('input');
  var last  = document.getElementById('pet[' + n + ']');
  field.id   = 
  field.name = 'pet[' + (++n) + ']';
  last.parentNode.insertBefore(field, last.nextSibling);
};

И вызываешь add чтобы добавить поле. Приходится так извращаться, так как непонятно, где они на странице находятся - можно было бы явно указать

 

[diavolic]

var n  = 0;
var id;
function add()
{
  var field = document.createElement('input');
  var last  = document.getElementById('pet[' + n + ']');
  field.id   = 
  field.name = 'pet[' + (++n) + ']';
  last.parentNode.insertBefore(field, last.nextSibling);
};

И вызываешь add чтобы добавить поле. Приходится так извращаться, так как непонятно, где они на странице находятся - можно было бы явно указать

а с этим что делать?

new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});

 

[avantus]

а с этим что делать?

new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});

вопрос хороший. как раз с этим основная проблема и есть...

 

[CNiks0N]

а с этим что делать?

new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});

А с этим всё просто, делаешь

var n  = 0;
var id;
function add()
{
  var field = document.createElement('input');
  var last  = document.getElementById('pet[' + n + ']');
  newid = ++n;
  field.id   = 
  field.name = 'pet[' + newid + ']';
  last.parentNode.insertBefore(field, last.nextSibling);
 eval('new Ajax.Autocompleter("pet['+newid+']", "pet_choices['+newid+']", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: \'indicator\'})');
};

 

[avantus]

А с этим всё просто, делаешь

var n  = 0;
var id;
function add()
{
  var field = document.createElement('input');
  var last  = document.getElementById('pet[' + n + ']');
  newid = ++n;
  field.id   = 
  field.name = 'pet[' + newid + ']';
  last.parentNode.insertBefore(field, last.nextSibling);
 eval('new Ajax.Autocompleter("pet['+newid+']", "pet_choices['+newid+']", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: \'indicator\'})');
};

Почему то не добавляется поле...

 

[diavolic]

Почему то не добавляется поле...

выложи исходник страницы!

 

[avantus]

вот таблица:
<table>
<tr><td>Заболевание</td><td>Тип</td></tr>
<tr>
<td><input type="text" id="pet[0]" name="pet[0]" style="width:200px" value="" />
<span id="indicator" style="height:11px; display:none;"><img src="images/1.gif" width="43" height="11" align="absmiddle" alt="Загрузка..." /></span>
<div id="pet_choices[0]" class="autocomplete"></div>
<script type="text/javascript">
new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});
</script>
</td>
<td><input type="radio" name="tip_zab[0]" value="Основной"/>Основное
<br /><input type="radio" name="tip_zab[0]" value="Сопутствующий"/>Сопутствующее</td>
</tr>
</table>

в идеале надо добавлять в неё строку:

<tr>
<td><input type="text" id="pet" name="pet" style="width:200px" value="" />
<span id="indicator" style="height:11px; display:none;"><img src="images/1.gif" width="43" height="11" align="absmiddle" alt="Загрузка..." /></span>
<div id="pet_choices" class="autocomplete"></div>
<script type="text/javascript">
new Ajax.Autocompleter("pet", "pet_choices", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});
</script>
</td>
<td><input type="radio" name="tip_zab" value="Основной"/>Основное
<br /><input type="radio" name="tip_zab" value="Сопутствующий"/>Сопутствующее</td>
</tr>

 

[avantus]

Ну что, есть варианты решения? Очень надо!!! Пожалуйста!!!

 

[CNiks0N]

Вот что получилось у меня:

<html>
<body>

<script>
	var n  = 0;
	var id;
function add()
{
  t_tbody = document.getElementById('totable');
 
  n++;
	
	n_tr = document.createElement('tr');
	n_td_1 = document.createElement('td');
	n_td_1.innerHTML = '<input type="text" id="pet[' + n + ']" name="pet[' + n + ']" style="width:200px" value="" />' +
					'<span id="indicator'+n+'" style="height:11px; display:none;"><img src="images/1.gif" width="43" height="11" align="absmiddle" alt="Загрузка..." /></span>' +
					'<div id="pet_choices[i]" class="autocomplete"></div>';
						
	eval('new Ajax.Autocompleter("pet['+n+']", "pet_choices['+n+']", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: \'indicator'+n+'\'})');
  	n_tr.appendChild(n_td_1);
  	
  	n_td_2 = document.createElement('td');
  	n_td_2.innerHTML = '<input type="radio" name="tip_zab['+n+']" value="Основной"/>Основное' +
						'<br /><input type="radio" name="tip_zab['+n+']" value="Сопутствующий"/>Сопутствующее';
  	n_tr.appendChild(n_td_2);
  	
  t_tbody.appendChild(n_tr);
 
};
</script>
<table>
<tbody id="totable">
<tr><td>Заболевание</td><td>Тип</td></tr>
<tr>
<td><input type="text" id="pet[0]" name="pet[0]" style="width:200px" value="" />
<span id="indicator" style="height:11px; display:none;"><img src="images/1.gif" width="43" height="11" align="absmiddle" alt="Загрузка..." /></span>
<div id="pet_choices[0]" class="autocomplete"></div>
<script type="text/javascript">
new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});
</script>
</td>
<td><input type="radio" name="tip_zab[0]" value="Основной"/>Основное
<br /><input type="radio" name="tip_zab[0]" value="Сопутствующий"/>Сопутствующее</td>
</tr>
</tbody>
</table>
<input type="button" onclick="add();">
</body>
</html>

Заметь что появился тэг tbody, он обязателен для IE и мозилла его держит