Javascript - добавление полей в форму с сохранением введенных данных

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Holger Dee Assuran, 3 июн 2009.

  1. Holger Dee Assuran

    Holger Dee Assuran Гость

    Доброго времени суток всем.
    Есть у меня одна задачка - форма изначально содержит три текстовых поля в одну строку и ссылку "еще". При клике на "еще" нужно добавить еще одну строку с тремя полями и ссылкой "убрать". При клике на "убрать" в одной из строк эта строка должна быть убрана. Всего строк - неограниченное количество. В общем решение я нашел - довольно распространенное в сети:
    Код (Text):
    <script>
    function addLine()
    {
    c=++document.getElementById('count').value; // увеличиваем счётчик строк
    s=document.getElementById('friends').innerHTML; // получаем HTML-код таблицы
    s=s.replace(/[\r\n]/g,''); // вырезаем все символы перевода строк
    re=/(.*)(<tr id=.*>)(<\/table>)/gi;
    // это регулярное выражение позволяет выделить последнюю строку таблицы
    s1=s.replace(re,'$2'); // получаем HTML-код последней строки таблицы
    // заменяем все цифры к квадратных скобках
    s2=s1.replace(/\[\d+\]/gi,'['+c+']');
    // на номер новой строки
    s2=s2.replace(/(rmLine\()(\d+\))/gi,'$1'+c+')');
    // заменяем аргумент функции rmline на номер новой строки
    s=s.replace(re,'$1$2'+s2+'$3');
    // создаём HTML-код с добавленным кодом новой строки
    document.getElementById('friends').innerHTML=s;
    // возвращаем результат на место исходной таблицы
    return false; // чтобы не происходил переход по ссылке
    }

    function rmLine(q)
    {
    if (q!=0){
    s=document.getElementById('friends').innerHTML;
    s=s.replace(/[\r\n]/g,'');
    re=new RegExp('<tr id="?newLine"? item="?\\['+q+'.*?<\\/tr>','gi');
    // это регулярное выражение позволяет выделить строку таблицы с заданным номером
    s=s.replace(re,'');
    // заменяем её на пустое место
    document.getElementById('friends').innerHTML=s;
    }
    return false;
    }
    </script>

    <form action='#' method='post'>
    <span id='friends'>
    <table border=1 width='100%'>
    <tr><th>ФИО</th><th>E-mail</th><th>Город</th><th><a href='#' onclick='return addLine();'>еще</a></th></tr>
    <tr id='newLine' item='[0]'>
    <td><input type='text' name='fr_fio[0]'></td>
    <td><input type='text' name='fr_email[0]'></td>
    <td><input type='text' name='fr_city[0]'></td>
    <td><a href='#' onclick='return rmLine(0);'>удалить</a></td>
    </tr>
    </table>
    <input type='hidden' name='count' id='count' value='0'>
    </span>
    </form>
    И все вроде хорошо, но есть одно НО - при добавлении или удалении строк, данные введенные в поля формы пропадают, а нужно что-бы оставались. Подскажите как это сделать?
     
  2. Vovochka

    Vovochka Гость

    При удаленнии N'ого поля занасоить его значене в массив, при восстановлении поля, вернуть ему значение.
    Нуэто как один из возможных вариантов.
     
  3. Holger Dee Assuran

    Holger Dee Assuran Гость

    Видимо я не совсем точно сформулировал. При добавлении новой строки с полями и при удалении одной из строк, в решении которое я нашел, перерисовывается вся таблица, при этом все уже введенные в форму данные пропадают.
    Скорее так - при создании новой строки с полями собирать значения уже заполненных в массив(ы). При перерисовке таблицы с полями подставить значения. При удалении строки полей - то же самое, собрать значения заполненных полей и подставить их при перерисовке таблицы.
    Я честно говоря не силен в JavaScript - подскажешь как это делается?
     
  4. Holger Dee Assuran

    Holger Dee Assuran Гость

    Решение найдено. Нет возможности выбрать какую именно строку удаляем (всегда удаляем последнюю), зато работает как надо - сохраняя введенные данные. Разница в подходе - в первом листинге я перерисовывал всю таблицу с полями формы заново и, естественно, "терял" введенные данные.
    В этом листинге я посредством DOM дополняю таблицу новым элементом TBODY и пишу в него HTML-код новой строки с полями формы. При удалении я проверяю не удаляю ли я TBODY исходной таблицы и просто убиваю последний из них.
    Код (Text):
    <script>
    var count=0;    // Счетчик элементов TBODY
    // Вставка новых строк в форму
    function addLine() {
    count++;    // Увеличиваем количество TBODY
    var table=document.getElementById('friends');   // Получаем указатель нужной нам таблицы
    var tbody = document.createElement('tbody');    // Создаем новый TBODY
    table.appendChild(tbody);   // Вставляем его в конец таблицы
    // Пишем в него все что нам нужно
    tbody.innerHTML="\n\n<tr id='"+count+"'>\n<td><input type='text' name='fr_fio["+count+"]'></td>\n"
    +"<td><input type='text' name='fr_email["+count+"]'></td>\n"
    +"<td>\n<select name='fr_city["+count+"]'>\n"
    +"<option value='1'>Москва</option>\n<option value='2'>Немосква</option>\n"
    // строку выше заменить на реальный список городов
    +"</select>\n</td>\n</tr>\n\n";
    return false;
    }
    // Удаление последней строки
    function rmLine()
    {
    if (count!=0){  // Удаляем любую строку кроме первой
    var table=document.getElementById('friends');   // Получаем указатель нужной нам таблицы
    var tbody = table.lastChild;    // Выбираем последний дочерний элемент таблицы (вставленный нами TBODY)
    table.removeChild(tbody);   // Убиваем его
    count--;    // Уменьшаем счетчик элементов TBODY
    }
    return false;
    }
    </script>

    <a class='friendsForm' href='#' onclick='return addLine();'>добавить</a>
    <a class='friendsForm' href='#' onclick='return rmLine();'>убрать</a>
    <table id='friends' border='1'>
    <tbody>
    <tr><td>ФИО</td><td>e-mail</td><td>город</td></tr>
    <tr id='0'>
    <td><input type='text' name='fr_fio[0]'></td>
    <td><input type='text' name='fr_email[0]'></td>
    <td>
    <select name='fr_city[0]'>
    <option value='1'>Москва</option>
    <option value='2'>Немосква</option>
    </select>
    </td>
    </tr>
    </tbody>
    </table>
     
Загрузка...
Похожие Темы - Javascript добавление полей
  1. itincorp
    Ответов:
    0
    Просмотров:
    61
  2. itincorp
    Ответов:
    0
    Просмотров:
    72
  3. Aaleks111
    Ответов:
    2
    Просмотров:
    193
  4. SvetlanaL
    Ответов:
    0
    Просмотров:
    166
  5. SvetlanaL
    Ответов:
    0
    Просмотров:
    186

Поделиться этой страницей