2016-08-14 6 views
0

私は友人の友人のためのウェブサイトで働いています、そして、私が現在取り組んでいる最大のものは採用フォームです。私はすべてフォームが完了したが、私は入力情報を新しいページで開くことができません。質問と入力された回答のみが含まれる発言する印刷画面。私は上手く動作する非常に単純なコードを持っていました。それは私が印刷したかったものとまったく同じようにポップアップしました。問題は、CSSでカスタマイズできないことです。私はここでヘルプの質問からそれを行う別の方法を見つけた。しかし、この質問をしたこの人は私と同じことをしていないので、あまりにも助けになるだけです。カスタマイズ可能なフォームからの情報で新しいウィンドウを作成しようとしています。スティック

これは私はそれがうまく働いてみましたが、カスタマイズできませんでしたコードです:

<script type="text/javascript"> 
 

 
function printDiv(divName) { 
 
alert('s'); 
 
var printContents = document.getElementById(divName).innerHTML; 
 
w=window.open(); 
 
w.document.write(printContents); 
 
w.print(); 
 
w.close(); 
 
}
For specific area of a page 
 
<div id="print-content"> 
 
<form> 
 

 
    <input type="button" onclick="printDiv('print-content')" value="print a div!"/> 
 
</form> 
 
</div>

これは全く動作しませんでした私も試した別のコード、次のとおりです。

function printPage(){ 
 
     var width = screen.width - 50; 
 
     var tableData = '<table width="'+width+'" border="1">'+document.getElementsByTagName('table')[0].innerHTML+'</table>'; 
 

 
     var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>' 
 

 
     var data = cssHead + '<button onclick="window.print()">Print this page</button>'+tableData;  
 
     myWindow=window.open('','','width=auto,height=auto'); 
 
     myWindow.innerWidth = screen.width; 
 
     myWindow.innerHeight = screen.height; 
 
     myWindow.screenX = 0; 
 
     myWindow.screenY = 0; 
 
     myWindow.document.write(data); 
 
     myWindow.focus(); 
 
    };

これ以降は何も起こりません。私はボタンをクリックして何も起こらなかった。

は、それから私は両方の少しを取ってみました:

function printDiv(divName) { 
 

 

 
var printContents = document.getElementById(divName).innerHTML; 
 
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>' 
 

 

 
var data = cssHead + printContents; 
 

 
myWindow=window.open('','','width=auto,height=auto'); 
 
     myWindow.innerWidth = screen.width; 
 
     myWindow.innerHeight = screen.height; 
 
     myWindow.screenX = 0; 
 
     myWindow.screenY = 0; 
 
     myWindow.document.write(data); 
 
     myWindow.focus(); 
 
\t myWIndow.close(); 
 
}

また、これは動作しませんでした。何も起こらなかったボタンをクリックしました。私は何をすべきかのために恐ろしい損失を抱えています。私はいくつかのJavaScriptを知っているが、あまり多くはない。私は学校で少しそれにさらされていた。何も進んでいない。私は本当にこれをやりたいと思うし、それが終わる前の最後のものの一つです。何か案は?私は間違って何をしていますか?私の理解が正しければ

答えて

0

することは、これはあなたの

を助けるかもしれないメディア=「印刷」を使用して最初のJavaScriptでスタイルシートにあります。

も、私は再びこれを試してみましょう全く機能しなかったことをあなた

Print/Preview Ignoring my Print.css

0

function printDiv() { 
 

 

 
var printContents = document.getElementById("myForm"); 
 
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>' 
 

 

 
var data = cssHead +printContents; 
 

 
myWindow=window.open('','','width=auto,height=auto'); 
 
     myWindow.innerWidth = screen.width; 
 
     myWindow.innerHeight = screen.height; 
 
     myWindow.screenX = 0; 
 
     myWindow.screenY = 0; 
 
     myWindow.document.write(data); 
 
     myWindow.focus(); 
 
     myWindow.close(); 
 
} 
 
</script>
.form-style-1 { 
 
     
 
    margin:10px auto; 
 
    max-width: 1100px; 
 
    padding: 20px 12px 10px 20px; 
 

 
    background-color: #ccebff; 
 
} 
 
.form-style-1 li { 
 
    padding: 5px; 
 
    display: block; 
 
    list-style: none; 
 
    margin: 5px 0px 0px 0px; 
 
    background-color: transparent; 
 
} 
 
.form-style-1 label{ 
 
    margin:0 0 3px 0; 
 
    padding:0px; 
 
    display:block; 
 
    font-weight: bold; 
 
    color: #4db8ff; 
 
     
 
} 
 
.form-style-1 input[type=text], 
 
.form-style-1 input[type=date], 
 
.form-style-1 input[type=datetime], 
 
.form-style-1 input[type=number], 
 
.form-style-1 input[type=search], 
 
.form-style-1 input[type=time], 
 
.form-style-1 input[type=url], 
 
.form-style-1 input[type=email], 
 
textarea, 
 
select{ 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    border:1px solid #BEBEBE; 
 
    padding: 7px; 
 
    margin:0px; 
 
    -webkit-transition: all 0.30s ease-in-out; 
 
    -moz-transition: all 0.30s ease-in-out; 
 
    -ms-transition: all 0.30s ease-in-out; 
 
    -o-transition: all 0.30s ease-in-out; 
 
    outline: none; 
 
} 
 
.form-style-1 input[type=text]:focus, 
 
.form-style-1 input[type=date]:focus, 
 
.form-style-1 input[type=datetime]:focus, 
 
.form-style-1 input[type=number]:focus, 
 
.form-style-1 input[type=search]:focus, 
 
.form-style-1 input[type=time]:focus, 
 
.form-style-1 input[type=url]:focus, 
 
.form-style-1 input[type=email]:focus, 
 
.form-style-1 textarea:focus, 
 
.form-style-1 select:focus{ 
 
    -moz-box-shadow: 0 0 8px #88D5E9; 
 
    -webkit-box-shadow: 0 0 8px #88D5E9; 
 
    box-shadow: 0 0 8px #88D5E9; 
 
    border: 1px solid #88D5E9; 
 
} 
 
.form-style-1 .field-divided{ 
 
    width: 20%; 
 
} 
 

 
.form-style-1 .field-divided2{ 
 
    width: 152px; 
 
} 
 

 
.form-style-1 .field-long{ 
 
    width: 20%; 
 
} 
 
.form-style-1 .field-select{ 
 
    width: 8%; 
 
} 
 

 
.form-style-1 .field-select2{ 
 
    width: 100px; 
 
} 
 

 
.form-style-1 .field-textarea{ 
 
    height: 80px; 
 
} 
 
.form-style-1 input[type=submit], .form-style-1 input[type=button]{ 
 
    background: #4B99AD; 
 
    padding: 8px 15px 8px 15px; 
 
    border: none; 
 
    color: #fff; 
 
} 
 
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{ 
 
    background: #4691A4; 
 
    box-shadow:none; 
 
    -moz-box-shadow:none; 
 
    -webkit-box-shadow:none; 
 
} 
 
.form-style-1 .required{ 
 
    color:red; 
 
}
<div id="frminfo"> 
 
<form method="post" id="myform" enctype="text/plain"> 
 
<ul class="form-style-1">

役立つかもしれない、このリンクを参照してください。私は印刷したいフォーム入力、私が使用しているjavascriptとボタンonClickイベントをポストするつもりです。私はすでにフォームに影響を与えるCSSも含めました。私はonClickイベントを引き起こすはずの印刷ボタンをクリックしますが、何も起こりません。私はこれを理解できません。何週間も立ち往生している。

私はもはや、カスタマイズするCSSを気にすることなく機能する機能を得ることができません。

関連する問題