Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление полей формы по желанию пользователя (https://javascript.ru/forum/misc/7329-dobavlenie-polejj-formy-po-zhelaniyu-polzovatelya.html)

Катерина 26.01.2010 22:50

Добавление полей формы по желанию пользователя
 
Доброго времени суток.
Фух, изучала-изучала. Что-то получилось. Но мой код копирует последнюю строку и добавляет её. Подскажите, пжл, как сделать так, чтобы всё-таки добавлялась строка с новыми полями, которым присваивалось имя с 2-мя индексами. Так как я потом считываю в двумерный массив значения введеные пользователем и выполняю ряд проверок. Очень хотела выполнить сама, но...
[JS]
var c=0;
function addline()
{
c++;
s=document.getElementById('table').innerHTML;
s=s.replace(/[\r\n]/g,'');
re=/(.*)(<tr id=.*>)(<\/table>)/gi;
s1=s.replace(re,'$2');
s2=s1.replace(/\[\d+\]/gi,'['+c+']');
s2=s2.replace(/(rmline\()(\d+\))/gi,'$1'+c+')');
s=s.replace(re,'$1$2'+s2+'$3');
document.getElementById('table').innerHTML=s;
return false;
}
function rmline(q)
{
if (c==0) return false; else c--;
s=document.getElementById('table').innerHTML;
s=s.replace(/[\r\n]/g,'');
re=new RegExp('<tr id="?newline"? nomer="?\\['+q+'.*?<\\/tr>','gi');
s=s.replace(re,'');
document.getElementById('table').innerHTML=s;
return false;
}

</JS>
......
<form name="first">
<span id="table">
<table>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
<tr id="newline" nomer="[0]">
<td><input type="text" name="text01"></td>
<td><input type="text" name="text02"></td>
<td><input type="text" name="text03"></td>
</tr>
</table>
</span>
....
<td><input type="button" value="Добавить" onclick="return addline();"></td>
<td><input type="button" value="Удалить" onclick="return rmline(0);"></td>
...

Gvozd 26.01.2010 23:03

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Катерина 27.01.2010 20:51

Как говорят наши IT-шники "раскурила" еще один способ! Но не получается форму загнать в таблицу, чтобы было 2 индекса у элемента. (Да и с точки зрения дизаина страницы). Помогите, пжл. Понимаю что нужно еще один div добавить. Нo как и куда лучше не получается. Сейчас получается, что меняется только 2 индекс.
var index=0;
function AddItem() {
  div=document.getElementById("index");
  button=document.getElementById("add");
  index++;
for (index=1;index<=7;index++){
  if (index<=6){
   newtext="<input type=\"text\" name=\"text0"+index+"\">";
   newnode=document.createElement("span");
   newnode.innerHTML=newtext;
   div.insertBefore(newnode,button);
}else{
   newtext="<input type=\"text\" name=\"text0"+index+"\"><br>";
   newnode=document.createElement("span");
   newnode.innerHTML=newtext;
   div.insertBefore(newnode,button);
    }  
}
}

.....
<form name="first">
<div ID="index">
<input type="text" name="text00">
....
<input type="text" name="text06"><br>
<input type="button" value="Добавить поле" onClick="AddItem();" ID="add">

</div>
....

Катерина 30.01.2010 17:48

Всё, сделала всё сама :)))


Часовой пояс GMT +3, время: 16:46.