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

Тема в разделе "PHP", создана пользователем avantus, 30 май 2010.

Статус темы:
Закрыта.
Модераторы: latteo
  1. avantus

    avantus Постоялец

    Регистр.:
    24 июл 2009
    Сообщения:
    64
    Симпатии:
    0
    Есть поле в котором при начале ввода появляется список на 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[]
     
  2. xaens

    xaens Писатель

    Регистр.:
    14 июн 2008
    Сообщения:
    2
    Симпатии:
    0
    Код:
    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 чтобы добавить поле. Приходится так извращаться, так как непонятно, где они на странице находятся - можно было бы явно указать
     
  3. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102

    а с этим что делать?
    Код:
    new Ajax.Autocompleter("pet[0]", "pet_choices[0]", "./script/pets.php", {paramName: "pet", minChars: 1, indicator: 'indicator'});
     
  4. avantus

    avantus Постоялец

    Регистр.:
    24 июл 2009
    Сообщения:
    64
    Симпатии:
    0
    вопрос хороший. как раз с этим основная проблема и есть...
     
  5. CNiks0N

    CNiks0N lamp.root

    Регистр.:
    28 ноя 2008
    Сообщения:
    230
    Симпатии:
    48
    А с этим всё просто, делаешь
    Код:
    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\'})');
    };
    
     
  6. avantus

    avantus Постоялец

    Регистр.:
    24 июл 2009
    Сообщения:
    64
    Симпатии:
    0
    Почему то не добавляется поле...
     
  7. diavolic

    diavolic

    Регистр.:
    17 мар 2010
    Сообщения:
    522
    Симпатии:
    102
    выложи исходник страницы!
     
  8. avantus

    avantus Постоялец

    Регистр.:
    24 июл 2009
    Сообщения:
    64
    Симпатии:
    0
    вот таблица:
    <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>
     
  9. avantus

    avantus Постоялец

    Регистр.:
    24 июл 2009
    Сообщения:
    64
    Симпатии:
    0
    Ну что, есть варианты решения? Очень надо!!! Пожалуйста!!!
     
  10. CNiks0N

    CNiks0N lamp.root

    Регистр.:
    28 ноя 2008
    Сообщения:
    230
    Симпатии:
    48
    Вот что получилось у меня:
    Код:
    <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 и мозилла его держит
     
Статус темы:
Закрыта.