Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Динамическое добавление input


Автор: fuckerok 20.3.2005, 13:25
Драсте, вот совершенно забыл весь js который знал (немного)

Вчера начал писать голосованиея на php
и там должно быть какое-то кол-во вариантов голосования, ну а если юзеру надо больше?

Вот тут пришла идея сделать такой финт кнопка add по нажатию на которую добовлялось бы новое поле


Код

<script>
:qstn 
</script>
<table>
<tr id=ch>
<input type=text name=choise[1]>
<input type=text name=choise[2]>
<input type=text name=choise[3]>
.....
<!-- вот сюда хочу добавить поле, по нажатию кнопки  естественно увиличив name=choise[xxx] //-->
<input type=button onClick="addfield()" value=ADD>
</tr>
</table>


что-то пытался сделать, но ничего не получилось, хотя это довольно легко реализовать
Помогите плиз

Автор: Sardar 20.3.2005, 16:26
Создаем элемент, добавляем в контейнер:
Код
<script>
function addfield() {
  var cont=document.getElementById("ch");
  var num=cont.getElementsByTagName("INPUT").length+1;
  var inp=document.createElement("INPUT");
  inp.type="text";
  inp.name="choise["+num+"]";
  cont.appendChild(inp);
}
</script>
<table><tr>
<td id="ch">
<input type="text" name="choise[1]" />
<input type="text" name="choise[2]" />
<input type="text" name="choise[3]" />
</td><td>
<input type="button" onclick="addfield()" value="ADD" />
</td></tr>
</table>

Автор: fuckerok 20.3.2005, 19:51
Sardar
спасибо щас посмотрим с меня плюс smile

Автор: Aliance 20.3.2005, 21:57
Кстати, вот может что пригодится от сюда: http://forum.vingrad.ru/index.php?showtopic=44344

PS: Sardar, пока я писал код - ты уже запостил, а код почти точь-в-точь как у тебя :-) Даже переменные похоже названны :-)

Автор: magrussia 4.4.2006, 10:05
ПОчитал вот, и хочу узнать, можно ли вместо Input вводить <select> , такого плана..


Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function mmm(sel)
 {
    var val = sel.options[sel.selectedIndex].value; //выбрали какую то строку
    document.getElementById("inpt").value = val;
    document.getElementById("mytd").innerHTML = val;
 }
</script>
<script>
 function mmm2(sel2)
 {
    var val = sel2.options[sel2.selectedIndex].value;    // то что выбрал юзер
    var koeficient = document.getElementById("new_value2").value; // коэфициент умножения
    var new_val2 = val*koeficient;    // перемножаем их
    document.getElementById("mytd2").innerHTML = val; //выводим в div значение выбранного option
    document.getElementById("inpt2").value = new_val2; // в инпут с  id="inpt2" будет выводится результат умножения
  }
  </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<script>
function addfield() {
  var cont=document.getElementById("ch");
  var num=cont.getElementsByTagName("INPUT").length+1;
  var inp=document.createElement("INPUT");
  inp.type="text";
  inp.name="choise["+num+"]";
  cont.appendChild(inp);
}
</script>
<table><tr>
<td id="ch">
<select name="choise[1]" style="width:250px" onChange="mmm(this)">
<option value="3000">Переменный ток 220/2/50 Гц до 3 кВт</option>
      <option value="4200">Переменный ток 380/3/50 Гц до 5 кВт</option>
      <option value="6600">Переменный ток 380/3/50 Гц до 10 кВт</option>
      <option value="9600">Переменный ток 380/3/50 Гц до 25 кВт</option>
      <option value="12300">Переменный ток 380/3/50 Гц до 50 кВт</option>
      <option value="15000">Переменный ток 380/3/50 Гц свыше 50 кВт</option>
      <option value="1000">Переменный ток 220/2/50 Гц до 1 кВт</option>
  </select>
<input type="text" name="choise[2]" />

<input type="text" name="choise[3]" />
</td><td>
<input type="button" onclick="addfield()" value="ADD" />
</td></tr>
</table>
</body>
</html>



алгоритм - add поле со списком, выбирает там позицию, ппри необходимости повторить ))) А вот список smile


ПОДСКАЖИТЕЕЕЕ"!!

Автор: magrussia 6.4.2006, 08:06
ААААААААААААААААААУууууууууууууууууууууууууууууууууууууууууууу....................................... smile



 ! 
12345c		Не советуем (от лица модераторов) Вам заниматься такими комментариями, это расценивается как флуд, засорение тем (Если на сообщение не обратили внимание, сформулируйте вопрос иначе.).

Автор: magrussia 6.4.2006, 13:30
Спасиба за совет.


Если в кртаце, то мне надо чтобы добавлялись не инпуты , а списки ( <option><select>) уже с вбитыми позициями. Как можно это реализовать? smile( Подругому никак не могу написать smile

Автор: dstorm81 6.4.2006, 14:07
Код

<html>
<body>
<div id=fS>
</div>
<input type=button onclick=addMe() value='добавь меня'>

<script>
var fromUser=7
var strSel='';
var startVal=document.getElementById('fS').innerHTML;
function addMe()
{
strSel+='<select>';
strSel+='<option>'+fromUser*1+'</option>'
strSel+='<option>'+fromUser*2+'</option>'
strSel+='<option>'+fromUser*3+'</option>'
strSel+='<option>'+fromUser*4+'</option>'
strSel+='</select>'
document.getElementById('fS').innerHTML=startVal+strSel;

}
</script>

</body>
</html>
так подойдет?

Автор: magrussia 6.4.2006, 14:25
WOw интересно.


Код

<td><select name="select" style="width:250px" onChange="mmm(this)">
      <option value="3000">Переменный ток 220/2/50 Гц до 3 кВт</option>
      <option value="4200">Переменный ток 380/3/50 Гц до 5 кВт</option>
      <option value="6600">Переменный ток 380/3/50 Гц до 10 кВт</option>
      <option value="9600">Переменный ток 380/3/50 Гц до 25 кВт</option>
      <option value="12300">Переменный ток 380/3/50 Гц до 50 кВт</option>
      <option value="15000">Переменный ток 380/3/50 Гц свыше 50 кВт</option>
      <option value="1000">Переменный ток 220/2/50 Гц до 1 кВт</option>
    </select></td>


такого плана список, а главное чтобы были value, мне будет потом проще работать с позициями.

В твоём примере я не могу вбивать название позиций.

Автор: 12345c 6.4.2006, 15:42
В JS нет комбобоксов (с возможностью выбора или "вбивания"). Поэтому придётся или брать 2 поля или искать скрипты, эмулирующие комбобокс.

Типа такого, но этот не может добавлять значения в список:

Код

Эмуляция комбо-бокса. Стили селекта и замещающего его инпута, находящегося в верхнем слое, приведены в соответствие.
<div><select id=se style=color:red
   onfocus=with(this){style.visibility=h;d.all.in1.value=options[selectedIndex].text;}d.all.in1.size=d.all.in1.value.length+2;
   onChange=d.all.in1.value=this.options[this.selectedIndex].text;
><option>Sel.1</option><option>Sel.2</option></select>
<input id=in1 size=3 value=1
   onblur=with(d.all.se){style.visibility=v;options[selectedIndex].text=this.value;}this.size=this.value.length+2;
></div><br><br>

Автор: GoDleSS 10.7.2008, 17:19
Провозившись последнии полгода только с перлом, теперь туплю в плане яваскрипт.

Стоит задача:
есть в таблице узел из 2х строк (не чистый ХТМЛ-код, шаблон, но это не суть, т.к. обрабатывается на стороне сервера, т.е. намного раньше):
Код

              <tr>
                <td class="tableheader" align="right"><span id="where">_(Где):</span></td>
                <td class="tablebodydark">
                <span id="sourceHTML">
                  <select name="variable"  class="input_select">
                    <option value="customer_id">_(Номер клиента)
                    <option value="agreement_str">_(Номер договора в компании)<TMPL_LOOP VARIABLES>
                    <option value="<TMPL_VAR MNEMO>"><TMPL_VAR ESCAPE=HTML NAME></TMPL_LOOP>
                    <option value="status">_(Статус)
                  </select>
                  </span>
                </td>
              </tr>

              <tr>
                <td class="tableheader" align="right"><span id="what">_(Что):</span></td>
                <td class="tablebodydark"><input type="text" name="value" value="" class="input_text"></td>
              </tr>


Необходимо добавить созможность дублирования этого узла(а также удаления дублей, но сие чуть позже), дабы передать на серверный скрипт и обработать с логикой "И" или "ИЛИ".

Вроде бы все +/- просто, помечаем последующий <tr>, например, с помощью id="insertPoint", саму таблицу с помощью id="parentObj", вылавливаем контент:
Код

        var whereW = document.getElementById('where').innerHTML;
        var whatW = document.getElementById('what').innerHTML;
        var code = document.getElementById('sourceHTML').innerHTML;


генерируем "дубль"
Код

var newBlock_1 = document.createElement('tr');
        newBlock_1.id = 'whereBlock_' + fieldGroupsCounter;
        newBlock_1.innerHTML = '<td class="tableheader" align="right">' + whereW + '</td>' +
        '<td class="tablebodydark">' + code + '</td>';

var newBlock_2 = document.createElement('tr');
        newBlock_2.id = 'whatBlock_' + fieldGroupsCounter;
        newBlock_2.innerHTML = '<td class="tableheader" align="right">' + whatW + '</td>' +
        '<td class="tablebodydark"><input type="text" name="value" class="input_text"></td>';



и вставляем
Код

var insertPoint = document.getElementById('insertPoint');
var parentObj = document.getElementById('parentObj');
parentObj.insertBefore(newBlock_1, insertPoint);
parentObj.insertBefore(newBlock_2, insertPoint);


Однако не срабатывает (проверял на FF2 и Opera9).
Прошу помочь разобраться с задачкой.

Материт примерно так(с консоли ошибок FF):
Код

Ошибка: uncaught exception: [Exception... "Node was not found"  code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"  location: "customer_search.js Line: 25"]

Автор: comtat 11.7.2008, 15:41
Цитата(GoDleSS @  10.7.2008,  17:19 Найти цитируемый пост)
location: "customer_search.js Line: 25"

а что в линии 25 ???
и кто такие insertPoint и parentObj из твоего последнего скрипта ?? 
выложи более полный код

Автор: GoDleSS 11.7.2008, 15:57
Цитата

и кто такие insertPoint и parentObj из твоего последнего скрипта ?? 

Цитата

Вроде бы все +/- просто, помечаем последующий <tr>, например, с помощью id="insertPoint", саму таблицу с помощью id="parentObj", вылавливаем контент:


Код

<table id="parentObj">

....

  <tr>
                <td class="tableheader" align="right"><span id="where">_(Где):</span></td>
                <td class="tablebodydark">
                <span id="sourceHTML">
                  <select name="variable"  class="input_select">
                    <option value="customer_id">_(Номер клиента)
                    <option value="agreement_str">_(Номер договора в компании)<TMPL_LOOP VARIABLES>
                    <option value="<TMPL_VAR MNEMO>"><TMPL_VAR ESCAPE=HTML NAME></TMPL_LOOP>
                    <option value="status">_(Статус)
                  </select>
                  </span>
                </td>
              </tr>

              <tr>
                <td class="tableheader" align="right"><span id="what">_(Что):</span></td>
                <td class="tablebodydark"><input type="text" name="value" value="" class="input_text"></td>
              </tr>

...

              <tr id="insertPoint>


Т.е. parentObj - id таблицы самой, а insertPoint - id последуещей за этим участком из 2-х <tr> строки(т.е. также <tr>)

По-моему, объектную модель не нарушил, синтаксис тоже...

Автор: comtat 11.7.2008, 16:58
типа того
Код

<html>
<head><title></title></head>
<body>
<script>
fieldGroupsCounter = 0; 

function dropNew(id) {
    document.getElementById('tr1_'+id).style.display = 'none';
    document.getElementById('tr2_'+id).style.display = 'none';
} 

function addNew() {
    var whereW = document.getElementById('where').innerHTML;
        var whatW = document.getElementById('what').innerHTML;
        var code = document.getElementById('sourceHTML').innerHTML;
    var parentObj = document.getElementById('parentObj');

    newId = ++fieldGroupsCounter;

    // строка №1
    newBlock_1 = document.createElement("TR");
        newBlock_1.id = 'tr1_' + newId;

    td11 = document.createElement("TD");
    td11.id = "td_"+newId+'_11';
    //td11.class = "tableheader";
    td11.align = "right";
    td11.innerHTML = whereW;
    newBlock_1.appendChild(td11);

    td12 = document.createElement("TD");
    td12.id = "td_"+newId+'_12';
    //td12.class = "tablebodydark";
    td12.innerHTML = code;    
    newBlock_1.appendChild(td12);


    // строка №2
    newBlock_2 = document.createElement("TR");
    newBlock_2.id = "tr2_"+newId;

    td21 = document.createElement("TD");
    td21.id = "td_"+newId+'_21';
    //td21.class = "tableheader";
    td21.align = "right";
    td21.innerHTML = whatW;
    newBlock_2.appendChild(td21);
    
    td22 = document.createElement("TD");
    td22.id = "td_"+newId+'_22';
    //td22.class = "tablebodydark";
    td22.innerHTML = '<input type="text" name="value" class="input_text"><a href="javascript:dropNew('+newId+')">-</a>';    
    newBlock_2.appendChild(td22);
    
    parentObj.appendChild(newBlock_1);
    parentObj.appendChild(newBlock_2);
}
</script>
<table>
<tbody id="parentObj">
<tr>
    <td class="tableheader" align="right"><span id="where">_(Где):</span></td>
    <td class="tablebodydark">
        <span id="sourceHTML">
                  <select name="variable" class="input_select">
                    <option value="customer_id">_(Номер клиента)
                    <option value="agreement_str">_(Номер договора в компании)<TMPL_LOOP VARIABLES>
                    <option value="<TMPL_VAR MNEMO>"><TMPL_VAR ESCAPE=HTML NAME></TMPL_LOOP>
                    <option value="status">_(Статус)
                  </select>
                </span>
    </td>
</tr>
<tr>
    <td class="tableheader" align="right"><span id="what">_(Что):</span></td>
    <td class="tablebodydark"><input type="text" name="value" value="" class="input_text"><a href='javascript:addNew();'>+</a></td>
</tr>
</tbody>
</table>
</body>
</html>

Автор: GoDleSS 11.7.2008, 19:03
Т.е. в моем случае так: 
Код

<html>
<head><title></title></head>
<body>
<script>
fieldGroupsCounter = 0; 

function dropNew(id) {
    document.getElementById('tr1_'+id).style.display = 'none';
    document.getElementById('tr2_'+id).style.display = 'none';
} 

function addNew() {
    var whereW = document.getElementById('where').innerHTML;
        var whatW = document.getElementById('what').innerHTML;
        var code = document.getElementById('sourceHTML').innerHTML;
    var parentObj = document.getElementById('parentObj');

    newId = ++fieldGroupsCounter;

    // строка №1
    newBlock_1 = document.createElement("TR");
        newBlock_1.id = 'tr1_' + newId;

    td11 = document.createElement("TD");
    td11.id = "td_"+newId+'_11';
    //td11.class = "tableheader";
    td11.align = "right";
    td11.innerHTML = whereW;
    newBlock_1.appendChild(td11);

    td12 = document.createElement("TD");
    td12.id = "td_"+newId+'_12';
    //td12.class = "tablebodydark";
    td12.innerHTML = code;    
    newBlock_1.appendChild(td12);


    // строка №2
    newBlock_2 = document.createElement("TR");
    newBlock_2.id = "tr2_"+newId;

    td21 = document.createElement("TD");
    td21.id = "td_"+newId+'_21';
    //td21.class = "tableheader";
    td21.align = "right";
    td21.innerHTML = whatW;
    newBlock_2.appendChild(td21);
    
    td22 = document.createElement("TD");
    td22.id = "td_"+newId+'_22';
    //td22.class = "tablebodydark";
    td22.innerHTML = '<input type="text" name="value" class="input_text"><a href="javascript:dropNew('+newId+')">-</a>';    
    newBlock_2.appendChild(td22);

    var insertPoint = document.getElementById('insertPoint');
    
    parentObj.insertBefore(newBlock_1, insertPoint);
    parentObj.insertBefore(newBlock_2, insertPoint);
//    parentObj.appendChild(newBlock_1);
//    parentObj.appendChild(newBlock_2);
}
</script>
<table>
<tbody id="parentObj">
<tr>
    <td class="tableheader" align="right"><span id="where">_(Где):</span></td>
    <td class="tablebodydark">
        <span id="sourceHTML">
                  <select name="variable" class="input_select">
                    <option value="customer_id">_(Номер клиента)
                    <option value="agreement_str">_(Номер договора в компании)<TMPL_LOOP VARIABLES>
                    <option value="<TMPL_VAR MNEMO>"><TMPL_VAR ESCAPE=HTML NAME></TMPL_LOOP>
                    <option value="status">_(Статус)
                  </select>
                </span>
    </td>
</tr>
<tr>
    <td class="tableheader" align="right"><span id="what">_(Что):</span></td>
    <td class="tablebodydark"><input type="text" name="value" value="" class="input_text"><a href='javascript:addNew();'>+</a></td>
</tr>
<tr id="insertPoint">
    <td colspan="2">Bla-bla</td>
</tr>
</tbody>
</table>
</body>
</html>


Конструктор "Лего" без круных запчастей. При это DOM я как раз нарушил неслабо в своих предыдущих попытках.


Спасибо за помощь! Плюсомет еще не работает, а то есть за что smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)