Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Динамическое добавление input 
:(
    Опции темы
fuckerok
Дата 20.3.2005, 13:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 112
Регистрация: 30.3.2004
Где: спб

Репутация: нет
Всего: нет



Драсте, вот совершенно забыл весь 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>


что-то пытался сделать, но ничего не получилось, хотя это довольно легко реализовать
Помогите плиз
--------------------
PM MAIL ICQ   Вверх
Sardar
Дата 20.3.2005, 16:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Создаем элемент, добавляем в контейнер:
Код
<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>



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
fuckerok
Дата 20.3.2005, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 112
Регистрация: 30.3.2004
Где: спб

Репутация: нет
Всего: нет



Sardar
спасибо щас посмотрим с меня плюс smile
--------------------
PM MAIL ICQ   Вверх
Aliance
Дата 20.3.2005, 21:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



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

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

Это сообщение отредактировал(а) Aliance - 20.3.2005, 21:58
PM MAIL WWW ICQ Skype   Вверх
magrussia
Дата 4.4.2006, 10:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 152
Регистрация: 13.3.2006

Репутация: нет
Всего: нет



ПОчитал вот, и хочу узнать, можно ли вместо 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 - 5.4.2006, 11:59
PM MAIL   Вверх
magrussia
Дата 6.4.2006, 08:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 152
Регистрация: 13.3.2006

Репутация: нет
Всего: нет



ААААААААААААААААААУууууууууууууууууууууууууууууууууууууууууууу....................................... smile



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


Это сообщение отредактировал(а) 12345c - 6.4.2006, 10:33
PM MAIL   Вверх
magrussia
Дата 6.4.2006, 13:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 152
Регистрация: 13.3.2006

Репутация: нет
Всего: нет



Спасиба за совет.


Если в кртаце, то мне надо чтобы добавлялись не инпуты , а списки ( <option><select>) уже с вбитыми позициями. Как можно это реализовать? smile( Подругому никак не могу написать smile
PM MAIL   Вверх
dstorm81
Дата 6.4.2006, 14:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39



Код

<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>
так подойдет?



--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
magrussia
Дата 6.4.2006, 14:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 152
Регистрация: 13.3.2006

Репутация: нет
Всего: нет



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, мне будет потом проще работать с позициями.

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

Это сообщение отредактировал(а) magrussia - 6.4.2006, 14:29
PM MAIL   Вверх
12345c
Дата 6.4.2006, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



В 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>

PM WWW   Вверх
GoDleSS
Дата 10.7.2008, 17:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 11.2.2007
Где: Пироговский

Репутация: нет
Всего: 2



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

Стоит задача:
есть в таблице узел из 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"]

--------------------
It's a nice day to die my friend!
PM MAIL WWW ICQ   Вверх
comtat
Дата 11.7.2008, 15:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71



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

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


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
GoDleSS
Дата 11.7.2008, 15:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 11.2.2007
Где: Пироговский

Репутация: нет
Всего: 2



Цитата

и кто такие 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>)

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

Это сообщение отредактировал(а) GoDleSS - 11.7.2008, 15:57
--------------------
It's a nice day to die my friend!
PM MAIL WWW ICQ   Вверх
comtat
Дата 11.7.2008, 16:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71



типа того
Код

<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>



--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
GoDleSS
Дата 11.7.2008, 19:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 11.2.2007
Где: Пироговский

Репутация: нет
Всего: 2



Т.е. в моем случае так: 
Код

<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
--------------------
It's a nice day to die my friend!
PM MAIL WWW ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0654 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.