VPF::Добавление полей в форму - Форум программистов

lonelysuch

Дата 14.3.2008, 13:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

При клике на кнопку +, что не раз здесь уже обсуждалось, в форму добавляется новый элемент (точнее их три - два селекта и одно текстовое поле).

Код


<input type="button" id="add_part" value="+" onclick="createInput()" />

Код


function createInput() {
    document.getElementById("container").innerHTML = document.getElementById("container").innerHTML + addProperties();
}

Код


function addProperties() {
    id = current_id+1;
    current_id++;
    return " \
    <table width=\"100%\" border=\"0\" name=\"part_" + id + "\" id=\"part_" + id + "\"> \
    <tr align=\"left\"> \
        <td>деталь:&nbsp;</td> \
        <td> \
            <select id=\"type_" + id + "\" name=\"type_" + id + "\"> \
                <option value=\"\"></option> \
                <option value=\"cpu\">cpu</option> \
                <option value=\"ram\">ram</option> \
                <option value=\"hdd\">hdd</option> \
                <option value=\"raid\">raid</option> \
                <option value=\"bp\">блок питания</option> \
                <option value=\"cooler\">кулер</option> \
                <option value=\"net\">сетевая карта</option> \
            </select> \
        </td> \
    </tr> \
    <tr align=\"left\"> \
        <td>характеристика:&nbsp;</td> \
        <td> \
            <select id=\"size_" + id + "\" name=\"size_" + id + "\"> \
            <div id=\"list_" + id + "\" name=\"list_" + id + "\"> \
                <option value=\"\">выберите деталь</option> \
            </div> \
            </select> \
        </td> \
    </tr> \
    <tr align=\"left\"> \
        <td>базовая цена:&nbsp;</td> \
        <td> \
            <input type=\"text\" id=\"price_" + id + "\" name=\"price_" + id + "\" /> \
            <input type='button' id='add' value='+' onclick='createInput()'> \
            <input type='button' id='delete' value='-' onclick='deleteInput("+id+")'> \
        </td> \
    </tr> \
    <tr> \
        <td colspan=\"2\"><hr /></td> \
    </tr> \
    </table> \
    ";
}

все прекрасно добавляется и даже удаляется, но есть один не очень приятный нюанс. в Firefox'е если изменить данные в селектах и текстовом поле и добавить новый блок(2 селекта и тестовое поле), то все предыдущие первые селекты обнуляются =( подскажите куда "копать"?

dsCode

Дата 14.3.2008, 14:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

lonelysuch, заменить ".innerHTML =" на ".innerHTML +="

Это сообщение отредактировал(а) dsCode - 14.3.2008, 14:11

--------------------

the .code inside
:my music

lonelysuch

Дата 14.3.2008, 14:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

dsCode, изменил реакция отсутствует.

dsCode

Дата 14.3.2008, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

lonelysuch, упс, пардон, не доглядел - у Вас там и так плюсуется, а не затирается. Хм.. Да, действительно сбрасывается значение (даже на элементарном примере - если будет в диве селект с двумя опциями и, если выбрать вторую опцию, а затем приплюсовать к innerHTML'ю любое значение - строку "test", например, значение селекта сбрасывается). Чего не наблюдается при добавлении DOM'ом через appendChild(...). Пока (если горит) можете приапендить DOM'ом (все работает), а так - надо посмотреть, почему изменение innerHTML'я сбрасывает значения инпутов в FF...

--------------------

the .code inside
:my music

dsCode

Дата 14.3.2008, 15:10 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

хм.... IE обновляет значения полей после изменения innerHTML, FF - нет :( поэтому - либо обновлять вручную, либо использовать DOM-функции

--------------------

the .code inside
:my music

Sardar

Дата 14.3.2008, 19:20 (ссылка)

(голосов:2)

Загрузка ...

Бегун

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

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

.innerHTML уничтожает и создаёт по новой целое поддерево, естественно все свойства и всё состояние теряется.
Сделай проще:

Код

var d = document.createElement("div");
d.innerHTML = addProperties();
document.getElementById("container").appendChild(d);

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

dsCode

Дата 14.3.2008, 21:10 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Цитата(Sardar @ 14.3.2008, 19:20

)

.innerHTML уничтожает и создаёт по новой целое поддерево, естественно все свойства и всё состояние теряется.

теряются-теряются, только IE после этого их восстанавливает, а FF - нет. Хотя, осуждать FF не стоит, по-моему, innerHTML изначально пошел от IE (и чуть ли не имеет четкой стандартизации в W3C), поэтому IE под него и "подстроилась"

Цитата(Sardar @ 14.3.2008, 19:20

)

проще:

действительно, проще =)

--------------------

the .code inside
:my music

Nigel

Дата 14.3.2008, 22:50 (ссылка)

(нет голосов)

Загрузка ...

познаю мир

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

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

Насколько помню, свойство innerHTML не входит в спецификацию DOM, и W3C объявил его устаревшим

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »