Jump to content
  • 0

Скрипт для печати выбранного checkbox


lukas1984
 Share

Question

Нужен скрипт, который позволит печатать определенный текст. 
Использовать отдельные таблицы стилей не подходит, т.к в форме, которую печатаем, есть checkbox. 
Я хочу передавать в печать только те checkbox, которые были выбраны, а так же выбранные option value

Может есть уже готовые скрипты, которые печатают определенный текст? 
Буду признательна за ссылки, которые смогут помочь. 

Link to comment
Share on other sites

Recommended Posts

  • 0

 

 

А можно подробнее для начинающего чайника ?

 

HTML:

<iframe id="myIframe" style="display: none"></iframe> 

JS:

window.onload = function(){    function PrintText(text)    {        Popup(text);    }    function Popup(data)     {        var iframe = document.getElementById('myIframe');        iframeDoc = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;        iframeDoc.document.write('<html><head><title>my div</title>');        iframeDoc.document.write('</head><body >');        iframeDoc.document.write(data);        iframeDoc.document.write('</body></html>');        iframeDoc.print();        return true;    }};

Далее просто вызываете PrintText, передавая ему ваш HTML код.

Link to comment
Share on other sites

  • 0

 

 

 

А можно подробнее для начинающего чайника ?

 

HTML:

<iframe id="myIframe" style="display: none"></iframe> 

JS:

window.onload = function(){    function PrintText(text)    {        Popup(text);    }    function Popup(data)     {        var iframe = document.getElementById('myIframe');        iframeDoc = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;        iframeDoc.document.write('<html><head><title>my div</title>');        iframeDoc.document.write('</head><body >');        iframeDoc.document.write(data);        iframeDoc.document.write('</body></html>');        iframeDoc.print();        return true;    }};

Далее просто вызываете PrintText, передавая ему ваш HTML код.

 

 

 

Вот такой я документ пытаюсь создать в html, но для печати мне надо ,что бы выводились на печать только выбранные данные.

JS мне надо вставить, как внешний скрипт ?

 

<html> 
<body> 
 
 
<table width="900" border="0"> 
<tr> 
<td colspan="2" style="background-color:#FFA500;"> 
<h2><p align="center">В АСУП</p></h2> 
</td> 
</tr> 
 
 
 
<tr> 
<td colspan="2" style="background-color:;"> 
<h>Разрешается <select name="menu" size="1">
<option selected="first">на поверхности</option>
<option value="selected" value="second">ранний выезд</option>
<option value="third">поздний спуск</option>
<option value="fourth">Четвертая позиция</option>
</select>
</form>  
<script language="javascript" type="text/javascript"><!--
var d = new Date();
 
var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");
 
document.write(+" " +d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " г.");
//--></script> в <select name="menu" size="1">
<option selected="first">I</option>
<option value="selected" value="second">II</option>
<option value="third">III</option>
<option value="fourth">IV</option>
</select>
</form> смену  <select name="menu" size="1">
<option value="first">нач. уч-ка</option>
<option selected="selected" value="second">зам. нач. уч-ка</option>
<option value="third">пом. нач. уч-ка</option>
<option value="fourth">пом. нач. уч-ка</option>
</select>
</form>
</h> 
</td> 
</tr> 
 
<tr valign="top"> 
<td style="background-color:#FFD700; width:150px; text-align:top;"> 
<form name="travel" action="http://ab-w.net/info.php"method="get"></p>
617  </a><input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
718  <input type="checkbox" name="transport" value="train" /> Поезд<br /> 
816  <input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
985  <input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
1023<input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
1156<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
1256<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
1458<input type="checkbox" name="transport" value="bus" /> Автобус<br /> </form>
 
</td> 
<td style="background-color:#eeeeee; height:200px; width:400px; text-align:top;"> 
<input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
<input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
<input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
<input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
</form>
Здесь идет содержание</td> 
</tr> 
 
 <FORM>
<INPUT NAME="print" TYPE="button" VALUE=" Печать страницы " ONCLICK="varitext()">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function varitext(text){
text=document
print(text)
}
// End -->
</SCRIPT>
</FORM>
 
</body> 
</html> 
Link to comment
Share on other sites

  • 0

Не понял... А зачем тогда тут JS? Просто скройте в @media print то, что не нужно печатать.

 

но ведь @media позволяет лишь менять стиль документа или скрывать что-то...

@media это хорошо, но я не пойму, как с помощью этой функции сделать, так что бы на печать выводились лишь выбранные пользователем checkbox... или может есть у @media команда определённая для этого ?

Link to comment
Share on other sites

  • 0

1.У меня получилось, что бы на печать показывались только выбранные checkbox, но при этом показываются остальные name всех checkbox. Как это устранить ?

2.И при выводе на печать мне надо, что бы checkbox с галочкой не был виден, только лишь выбранный текст. Как быть с этим ?  

 

 

 

 
 <head>
  <meta charset="utf-8">
  <title>checked</title>
  <style>
 
@media screen {
input[type=checkbox]:not(:checked) {
    
  }
 
@media print {
  input[type=checkbox]:not(:checked) {
   display: none; 
  }
}
  </style>
 </head>
 
 
<body>  
<table width="900" border="0"> 
<tr> 
<td colspan="2" style="background-color:#FFA500;"> 
<h2><p align="center">В АСУП</p></h2> 
</td> 
</tr> 
 
 
 
<tr> 
<td colspan="2" style="background-color:;"> 
<h>Разрешается <select name="menu" size="1">
<option selected="first">на поверхности</option>
<option value="selected" value="second">ранний выезд</option>
<option value="third">поздний спуск</option>
<option value="fourth">Четвертая позиция</option>
</select>
</form>  
<script language="javascript" type="text/javascript"><!--
var d = new Date();
 
var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");
 
document.write(+" " +d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " г.");
//--></script> в <select name="menu" size="1">
<option selected="first">I</option>
<option value="selected" value="second">II</option>
<option value="third">III</option>
<option value="fourth">IV</option>
</select>
</form> смену  <select name="menu" size="1">
<option value="first">нач. уч-ка</option>
<option selected="selected" value="second">зам. нач. уч-ка</option>
<option value="third">пом. нач. уч-ка</option>
<option value="fourth">пом. нач. уч-ка</option>
</select>
</form>
</h> 
</td> 
</tr> 
 
<tr valign="top"> 
<td style="background-color:#FFD700; width:150px; text-align:top;"> 
<form name="travel" action="http://ab-w.net/info.php"method="get"></p>
617    </a><input type="checkbox" name="transport" value="airplane" /> Иванов<br /> 
718    <input type="checkbox" name="transport" value="train" /> Петров<br /> 
816    <input type="checkbox" name="transport" value="car" /> Сидоров<br /> 
1718  <input type="checkbox" name="transport" value="train" /> Петров<br /> 
1816  <input type="checkbox" name="transport" value="car" /> Сидоров<br /> 
2718  <input type="checkbox" name="transport" value="train" /> Петров<br /> 
2816  <input type="checkbox" name="transport" value="car" /> Сидоров<br /> 
3816  <input type="checkbox" name="transport" value="car" /> Сидоров<br />  </form>
 
</td> 
<td style="background-color:#eeeeee; height:200px; width:400px; text-align:top;"> 
<input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
<input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
<input type="checkbox" name="transport" value="airplane" /> Самолет<br /> 
<input type="checkbox" name="transport" value="train" /> Поезд<br /> 
<input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 
<input type="checkbox" name="transport" value="bus" /> Автобус<br /> 
</form>
Здесь идет содержание</td> 
</tr> 
 
 <FORM>
<INPUT NAME="print" TYPE="button" VALUE=" Печать страницы " ONCLICK="varitext()">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function varitext(text){
text=document
print(text)
}
// End -->
</SCRIPT>
</FORM>
 
</body> 
</html> 
Link to comment
Share on other sites

  • 0

 

HTML:

<input type="checkbox" id="check"><label for="check">  123</label>

CSS:

@media print {  input[type=checkbox]:not(:checked), input[type=checkbox]:not(:checked) + label {    display: none;  }}

Спасибо, теперь получилось.

Но всё же checkbox и selected при печати видны, как квадрат с галочкой и прямоугольная рамка со словом соответственно. Хотелось бы, что не было видно на печати ни рамки selected, ни квадратика с галочкой checkbox. Это возможно ?

Link to comment
Share on other sites

  • 0

 

 

HTML:

<input type="checkbox" id="check"><label for="check">  123</label>

CSS:

@media print {  input[type=checkbox]:not(:checked), input[type=checkbox]:not(:checked) + label {    display: none;  }}

Спасибо, теперь получилось.

Но всё же checkbox и selected при печати видны, как квадрат с галочкой и прямоугольная рамка со словом соответственно. Хотелось бы, что не было видно на печати ни рамки selected, ни квадратика с галочкой checkbox. Это возможно ?

 

@media print {  input[type=checkbox], input[type=checkbox]:not(:checked) + label {    display: none;  }}
Link to comment
Share on other sites

  • 0
Но всё же checkbox и selected при печати видны, как квадрат с галочкой и прямоугольная рамка со словом соответственно. Хотелось бы, что не было видно на печати ни рамки selected, ни квадратика с галочкой checkbox. Это возможно ?
 

Так?

http://jsfiddle.net/bv5mvebp/6/

Link to comment
Share on other sites

  • 0

 

Но всё же checkbox и selected при печати видны, как квадрат с галочкой и прямоугольная рамка со словом соответственно. Хотелось бы, что не было видно на печати ни рамки selected, ни квадратика с галочкой checkbox. Это возможно ?
 

Так?

http://jsfiddle.net/bv5mvebp/6/

 

Это конечно отлично, но тогда придёться менять весь шаблон документа....

 

 

@media print { input[type=checkbox], input[type=checkbox]:not(:checked) + label { display: none; } }

 

А можно тоже самое, но уже для select ? 

Link to comment
Share on other sites

  • 0

Что у вас со шрифтами? Дайте код.

 <head>
  <meta charset="utf-8">
  <title>checked</title>
  <style>
 
@media screen {
input[type=checkbox]:not(:checked) {
    
  }
 
 
@media print {
    input[type=checkbox], input[type=checkbox]:not(:checked) + label, #print_doc {
        display: none;
    }
    select {
        border: none;
        background: none;
        -moz-appearance: window;
        -webkit-appearance: none;
    }
}
 
  </style>
 </head>
 
 
<body>  
<table width="900" border="0"> 
<tr> 
<td colspan="2" style="background-color:#FFA500;"> 
<h2><p align="center">В АСУП</p></h2> 
</td> 
</tr> 
 
<tr> 
<td colspan="2" style="background-color:;"> 
<h>Разрешается <select name="menu" size="1">
<option selected>ранний выезд</option>
<option value>поздний спуск</option>
<option value>отметка на поверхности</option>
</select>
</form>  
 
<script language="javascript" type="text/javascript"><!--
var d = new Date();
 
var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");
 
document.write(+" " +d.getDate()+ " " + month[d.getMonth()]
+ " " + d.getFullYear() + " г.");
//--></script> в <select name="menu" size="1">
<option selected="first">I</option>
<option value>II</option>
<option value>III</option>
<option value>IV</option>
</select>
</form> смену  <select name="menu" size="1">
<option value="first">зам.нач.уч-ка Нагайников Б.Н.</option>
<option>и.о.зам.нач.уч-ка Овчарик Б.И.</option>
<option>и.о.пом.нач.уч-ка Чеботарёв Е.Г.</option>
<option>и.о.пом.нач.уч-ка Горожанкин А.С.</option>
</select>
</form>
</h> 
</td> 
</tr> 
 
 
<tr valign="top"> 
<td style="background-color:#FFD700; width:150px; text-align:top;"> 
<form name="travel" action="http://ab-w.net/info.php"method="get"></p>
 
<input type="checkbox" id="check">
<label for="check">
  Овчарик Б.И.
</label>
<br>
 
</label>
<input type="checkbox" id="check">
<label for="check">
  Горожанкин А.С.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Чеботарёв Е.Г.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Васалатьев А.В.
</label>
<br>
 
</form>
 
 
</td> 
 
<td style="background-color:#eeeeee; height:90px; width:400px; text-align:top;">
 
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
</form>
 
 
<tr valign="top"> 
<td style="background-color:#00ff58; width:150px; text-align:top;"> 
<form name="travel" action="http://ab-w.net/info.php"method="get"></p>
 
 
<input type="checkbox" id="check">
<label for="check">
  Лукинов Р.Е.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Нищета Д.А.
</label>
<br>
 
 
 
</form>
 
 
</td> 
 
<td style="background-color:#eeeeee; height:50px; width:400px; text-align:top;"> 
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
 
 
 
<tr valign="top"> 
<td style="background-color:#00ff58; height:350px; width:150px; text-align:top;"> 
<form name="travel" action="http://ab-w.net/info.php"method="get"></p>
 
<input type="checkbox" id="check">
<label for="check">
  Лукоянов Е.В.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Горожанкин Ф.С.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Филонов Ю.В.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Лукинов Р.Е.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Салов В.А.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Курипка В.В.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Сизько Р.Г.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Мальцев О.Ю.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Нищета Д.А.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Лимаренко А.А.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Сороковой А.А.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Ванжа Ю.В.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Коваль О.А.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Яковлев А.С.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Тараненко В.В.
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  Лимаренко А.Н.
</label>
<br>
 
 
</form>
</td> 
 
 
<td style="background-color:#eeeeee; height:50px; width:400px; text-align:top;"> 
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
<input type="checkbox" id="check">
<label for="check">
  123
</label>
<br>
Link to comment
Share on other sites

  • 0

Ваш код ужасен. Я, конечно, понимаю, что вы это делать не хотите, но вам придётся переписать большую часть кода. Если не хотите это делать - могу сделать я.

 

Я бы с удовольствием написал лучше, но моих знаний не хватает на более оптимальный код. При этом хотелось бы познать тонкости кода, что бы далее писать самому документы по надобности. Ведь это не вёрстка сайта и мне кажется, что вполне можно научиться писать такие документы.

Если у вас есть желание и возможность, то я буду рад вашей помощи

Link to comment
Share on other sites

  • 0

Зачем нужно разделение людей на группы и зачем вторая колонка с checkbox'ами?

 

левые колонки разбиты на три части по должностям, а правые колонки - там будут прописаны причины для раннего выезда/позднего спуска/отметки на поверхности

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy