При открытии нового окна window.open, слетают значения в input text
На сайте существует длинная форма заказа товаров, котороя содержит большое кол-во input type='text'.
Появилась необходимость сделать печать заполненной формы заказа (только формы а не всей страницы) Для печати помещаю область в блок <div id="print" class="contentpane"> и использую след. ф-цию
var prtContent = document.getElementById(strid);
var prtCSS = '<link rel="stylesheet" href="/templates/css/template.css" type="text/css" />';
var WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<div id="print" class="contentpane">');
WinPrint.document.write(prtCSS);
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</div>');
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
/*WinPrint.close();*/
prtContent.innerHTML=strOldOne;
Но уже при открытии нового окна все значения в input обнуляются. Подскажите куда копать? Или как можно передлать ф-цию печати области страницы, чтобы не обнулялись значения в input |
Все верно. Свойство value != атрибут value. Атрибут - это начальное значение для свойства. Динамически измененное свойство не приводит к изменению атрибута. Это касается свойств value, checked и других некоторых.
Как вариант - пробежаться по элементам формы и проставить их значения в атрибуты. И не нужно "писать" в документ закрывающие теги (7 строчка). Это бесполезно. |
Спасибо за быстрый ответ.
Я практически не разбираюсь в джаваскрипте, буду очень признателен, если подскажите как пробежаться по элементам формы, чтобы перенести значения в новое окно. Массивом или как-то еще? А заодно было бы правильно сразу запретить редактирование input в новом окне. Это реально сделать? |
var form = document.getElementsByTagName('form');
for (var i = 0; i < form.elements.length; i++) {
form.elements[i].setAttribute('value', form.elements[i].value);
}
Можно еще так: var clone = form.cloneNode(true); printWindow.document.body.appendChild(clone); |
Большое спасибо, намучился, но сделал.
|
А запретить редактирование только на новой странице реально?
Я попробовал добавить запрет, но он срабатывает и на основную страницу. Очень бы хотелось установить запрет на редактирование только в новом окне. |
Пройтись по элементам клона и проставить element.readOnly = true
|
Понял, дело в том что я сначала пошел по пути form.elements[i].setAttribute('value', form.elements[i].value);
Потому что я не копировал полностью форму, копировал все кроме кнопки "Отправить". Если использовать клон, то все ок с readonly, но кнопка не нужна. Как можно убрать кнопку из клона формы? |
в принципе если использовать disabled кнопка не активна, так что все ок, но если подскажете как удалить элемент, все равно пригодится.
|
Можно и первым путем идти. Просто после записи в окно, используем код типа
var form = WinPrint.document.getElementsByTagName('form')[0];
// тут цикл с проходом по элементам и установкой readOnly = true
Или вторым путем, просто кнопку удалить через var button = form.getElementsByTagName['button'][0]; button.parentNode.removeChild(button); |
Огромное спасибо.
Вроде все сделал как хотел. Остался послдений неприятный момент. Во всех браузерах все нормально, кроме ИЕ. Тестирую на ие8. По ссылке он открывает даже новое окно, но оно пустое... весь код это "<HTML></HTML>" Сам код ф-ции
var myform = document.forms[1];
var myclone = myform.cloneNode(true);
var WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
for (var i = 0; i < myclone.elements.length; i++)
{
myclone.elements[i].readOnly='true';
myclone.elements[i].disabled='true';
}
WinPrint.document.body.appendChild(myclone);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
Джаваскрипт вроде включен, окно же открывается... но почему ничего не выводит не могу понять. |
F12
В случае если мы в document ничего не пишем, то и close() не нужен. Возможно в IE окно пустое, то есть даже без 'body', хотя врятли. Короче, F12 |
а я и не знал что в ие есть средства разработчика, спасибо)
|
WinPrint.document.body.appendChild(myclone);
про эту строчку отладчик выдает, что интерфейс не поддерживается |
WinPrint.contentWindow.document.body.appendChild(myclone); |
Скорее всего в ie нельзя в документ "подсаживать" элементы из чужого документа. Тогда с innerHTML остается вариант.
|
| Часовой пояс GMT +3, время: 23:39. |