проблема со свойством innerHTML в FF

demon · №1

Господа, у меня возникла проблема, решить которую самостоятельно не получается, буду весьма благодарен за любой совет.
проблема:
есть форма в ней таблица с элементами формы с заполняемыми полями и тд и тп, свойство document.getElementById("table").innerHTML возвращает лишь html-код таблицы без значений заполненых элементов формы ... и такое наблюдается только в FF, а в IE проблемы нет, там на каждый вызов document.getElementById("table").innerHTML возвращается html-код со всеми текущими значениями элементов формы.

как можно заставить корректно работать это свойство в FF? или может надо использовать что-то другое в данной ситуации?

VictorS · №2

demon, а кто сказал что IE корректно работает? ИМХО, не дефолтные значения не должны присутствовать в innerHTML, т.к. они не относятся к HTML как таковому. Хотя может я и не прав...
А чтобы сказать что использовать вместо этого нужно знать что хочется получить в результате.

demon · №3

VictorS, я и не говорил что в IE корректно, но в IE - так как хотелось бы ... а почему ты считаешь что не дефолтные значения не должны присутствовать, ведь они после введения уже являются частью html-кода?

VictorS · №4

Непосредственно HTML - это только язык разметки, который указывает где какие объекты на странице находятся. Интерактивность страницам придается за счет JavaScript и DOM. Вот и данные введенные в формы - это часть DOM, скорее, имхо.
А вообще я так и не понял что нужно получить в результате? Нужен именно html-код заполненной формы? Это для восстановления ее со значениями, если где-то при заполнении есть ошибка? Ну тогда можно обойтись другими методами.

Al_H · №5

Для текстовой области и текстового поля:

Выделить код

Код:

document.forms['formName1'].elements['textFieldName1'].value

для вываливающегося списка - выбранный элемент

Выделить код

Код:

document.forms['formName1'].elements['selectName1'].selectedIndex

для него же - значение и текст выбранного элемента

Выделить код

Код:

document.forms['formName1'].elements['selectName1'].options[document.forms['formName1'].elements['selectName1'].selectedIndex].value
document.forms['formName1'].elements['selectName1'].options[document.forms['formName1'].elements['selectName1'].selectedIndex].text

для флажка

Выделить код

Код:

document.forms['formName1'].elements['checkboxName1'].checked

для переключателя

Выделить код

Код:

document.forms['formName1'].elements['radioName1'][0].checked
document.forms['formName1'].elements['radioName1'][1].checked
document.forms['formName1'].elements['radioName1'][2].checked

Отредактировано Al_H (16-11-2006 13:50:55)

Коля Дубр · №6

Вот такой извратный код зачитывает для формы значения и выставляет соответствующие атрибуты, в результате чего при помощи сериализера можно получить подобие innerHTML в IE Даю сразу с тестовой страничкой. Проверял в FF2.0, может глючить, ибо сляпано за 10 минут +)

Выделить код

Код:

<html>
   <head>
     <script type="text/javascript">
        function showFormCode() {
           var form = document.getElementById('f1');
           var serializer = new XMLSerializer();
           setFormAttributes(form);
           alert(serializer.serializeToString(form));
        }
        function setFormAttributes(form) {
           for (var i in form.elements) {
              var cel = form.elements[i];
              switch (cel.tagName) {
                 case 'INPUT':
                    switch (cel.type) {
                       case 'text':
                          cel.setAttribute('value', cel.value);
                          break;
                       case 'checkbox': case 'radio':
                         (cel.checked) ? cel.setAttribute('checked', 'checked') : cel.removeAttribute('checked');
                         break;
                    }
                    break;
                 case 'TEXTAREA':
                    cel.firstChild.data = cel.value;
                    break;
                 case 'SELECT':
                    var opts = cel.getElementsByTagName('option');
                    for (var j = 0; j < opts.length; j++) {
                       (cel.selectedIndex == j) ? opts[j].setAttribute('selected', 'selected') : opts[j].removeAttribute('selected');
                    }
                    break;
              }
           }
        }
     </script>
   </head>
   <body>
     <form id="f1" action="/">
       <input type="text" name="t1" value="no" /><br />
       <select>
          <option name="o1">Opt 1</option>
          <option name="o2">Opt 2</option>
       </select><br />
       <input type="checkbox" name="cb" checked="checked" /><br />
       <input type="radio" name="r1" value="r_val_1" />R1<br />
       <input type="radio" name="r1" value="r_val_1" />R2<br />
       <textarea name="ta1">Default value</textarea>
       <input type="button" onClick="showFormCode()" />
     </form>
   </body>
</html>

Полезная информация

№114-11-2006 14:25:49