We Keep Coding

How do I place a hidden input field inside a textarea

I want to make a popup text box that shows source codes from the textarea in the popup as a web page wile at the same time it will not show the print button codes in the textarea because that text is meant to be as functions for the popup only. As you can see my textarea content has both javascript and html who needs to be hidden from the textarea, but at the same time needs to be inside the text area for the popup to work.
This means I can not put them outside the textarea because then that function will not show in the popup window who will show everything that is in the textarea of the web editor editor unless the popup is made to target a div that holds the textarea and and not the textarea directly. Even so that presents a problem as the textarea will not anymore be converted into a web page when getting the popup.
I am using this textarea for my popup:
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="The is Source Codes here"><script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script></textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t = document.form1.textfield.value;
win.document.write(t);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
So now what I want is for the print button codes to not be visible in the textarea, but that they are visible as a print button when the popup button is run. So that the print button adds to the visible source codes added into the box by the web designer.

UPDATE
When I posted this question I found no answer no were on the entire internet.
After fiddling with it for a long time I posted the question here. And by luck I found an answer of how to do it after a few minute of after posted the question. I will not delete the question since I am the FIRST on the internet to find and answer to this question.
Solution:
I solved the problem by simply making a hidden textarea linked to the input popup javascript who is also linked to the visible textera. That way what ever is put inside the visble textarea will come up in the popup and so will also the function from hidden in the hidden textarea come on the same popup when clicked on the "Preview" button.
You can put any HTML, CSS or JavaScript code inside the visible and inside the hidden textarea wile having all the input codes hidden from the visible textarea it but active when the popup is turned on.
<form name = "form1">
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="Put your Source Codes here">
</textarea>
<textarea hidden="on" name="textfield2" cols="1" rows="1" id="CodeExample2">
<script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script>
</textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t1 = document.form1.textfield.value;
var t2 = document.form1.textfield2.value;
win.document.write(t1);
win.document.write(t2);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
</form>
NOTE:
If you are making a web editor online as I am with preview function then it all of a sudden it is making sense. Because you will want to preview your codes that you text inside the textarea box and when previewing you will also want that the textarea box shows some extra buttons such as print the preview you made. Perfect to test a design or a page and such and then print it out by the click of one button on the popup generated by the textarea box. Look at the solution I found and test it yourself and see what I mean and why. It will work with any HTML, CSS and JS source codes.
Test it yourself if you do not understand why it was needed and how it works.

Html/Javascript Document.getelementbyid Not working

I am an intermediate HTML and I am starting to learn JavaScript within it.
<html>
<head>
<title>Uh oh! No page.</title>
<h1 class="index">The page you requested for is not available! Click here to go back</h1>
<style>
.index {
text-decoration: none;
font-family: Arial;
}
</style>
</head>
<body onload="myfunc()">
<script>
function myfunc() {
var x;
if (confirm("Im confuzzled! Where did the page go?\n\nSelect OK to be redirected and Cancel to do it manually ") == true) {
window.location = "index.html";
} else {
alert("You will now manually have to redirect to the lemoon homepage");
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
<footer onload="pageLocate()">
<script>
function pageLocate() {
document.getElementById("demo").innerHTML =
"Page location is: " + window.location.href;
}
</script>
</footer>
</html>
I cannot get the document tag to display anything. Can you please help?

i have scanned your code twice and still can't see where is the tag that has id = "demo". If you don't create a tag with an id, which is in this case : "demo", then when you call for it, how can console even work when it can't find the target ? i believe that this is your fault

There is no element with the ID of "demo". You would need to give the element that you want to perform a function with an id of "demo" for this to work.
EX:
<div id="demo">Hello!</div>
You did not have to ask this question, it just would have taken a little bit of thinking or some searching on google.

I really hope you wanted something like this, as there were some not so logical things there.
1.footer and h1 tags belong to the body of the page (inside tag).
2.you pretty much created a function to get some data for another function, that can be accessed from the other function
<html>
<head>
<title>Uh oh! No page.</title>
<style>
.index {
text-decoration: none;
font-family: Arial;
}
</style>
<script>
function myfunc() {
if (confirm("Im confuzzled! Where did the page go?\n\nSelect OK to be redirected and Cancel to do it manually ") == true) {
window.location = "index.html";
} else {
alert("You will now manually have to redirect to the lemoon homepage");
}
document.getElementById("demo").innerHTML = "Page location is: " + window.location.href;
}
</script>
</head>
<body onload="myfunc()">
<h1 class="index">The page you requested for is not available! Click here to go back</h1>
<footer id="demo" onload="pageLocate()">
</footer>
</body>
</html>

Getting blank page sent to printer using a hidden div method

I am using a code snippet that I found to display a multipage form using visibility hidden.
There is a very good possibility that all of my problem stems from this method. That resource was from here:
http://www.devx.com/webdev/Article/10483/0/page/2
It is a fairly straightforward way to display multiple pages of a form...it probably was never intended to be able to allow printing.
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$.getScript("printThis.js", function(){
});
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>
<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">
<div id="page1" class="page" style="visibility:visible;">
Applicant Name: <input type="text" size="50" name="name1" >
</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<div id="page2" class="page">
This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>
</div>
</form>
</body>
</html>
The "Print App" button is properly calling the printThis plugin. However, I get no content from the page1 DIV section. All that is printed is the normal header portion (Page 1 of 1) in the upper right and about:blank in lower left and date in lower right of page…no content, which with my sample file should be Applicant Name input box.
I assume that this is because the DIV for page1 is set to "hidden" while the content of page2 is being displayed. If I substitute "page2" in the button call then I get the content from page2 as expected.
So...I guess what I am after is a way to temporarily change the DIV being referenced in the printThis button call to be visible just long enough to perform the page print.
Any ideas?

I'm the plugin author - you need to incorporate the print media query into your css.
This would also help users that select file > print or control + P, as it will show all form elements.
The print media query allows you to make styling changes specifically for the printed page.
Example:
#media print {
#page1, #page2 {
display: block;
visibility: visible;
position: relative;
}
}
You include this in your css.
Additionally, based on your above code - you have css and javascript inline in your page. You should consider moving both to an external files, for maintenance and improved code standards.
printThis won't work with your current setup, because the plugin looks for the container (selector) you have specified and any linked css in the head of the document.
So for the above, you can do the following:
<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->
Then put this in your head:
<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->

Remove print button from hard copy

With reference to this link and this, I printing a report using javascript as
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
var data = data+'<br/><button onclick="window.print()">Print the Report</button>';
myWindow=window.open('','','width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Print Preview" onclick="printpage()" />
</body>
</html>
But after printing, the print button still remains at the hard copy. So how to hide the print button in hard copy when printing by using the above function?

Give your button a class, e.g. class="noprint". Then Add a stylesheet for print media to your CSS:
#media print {
/* style sheet for print goes here */
.noprint {
visibility: hidden;
}
}
Details: http://www.w3.org/TR/CSS2/media.html

I just solved this with the following css after assigning id to print button.
<style type="text/css">
#media print {
#myPrntbtn {
display : none;
}
}
</style>
And my button as follows.
<input id ="myPrntbtn" type="button" value="Print" onclick="window.print();" >
Also, you can run javascript function with the following actions...
Hide the button
Print the page using window.print();
Again Show back the button
Piece of code...
<script type="text/javascript">
function printMyPage() {
//Get the print button
var printButton = document.getElementById("myPrntbtn");
//Hide the print button
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Show back the print button on web page
printButton.style.visibility = 'visible';
}
</script>
Reference Hide Print button while printing a web page

How to make a "Print" button disappear

I followed one example:
I have a print image button. When clicked, the button opens the print dialog and then I want to hide the image button.
But, initially I am not able to see the print button to click on it.
<link href="style-print.css" rel="stylesheet" media="print" type="text/css">
#print {
display: none;
}
<div style="float: right;" id="print">
<input id="print-bnt" type="button" onclick="callprint()"/> </div>
I hope before display the page, button goes to hide. (???)
I want to hide the "print button" after it's clicked.
What do I have to change here?

Your code underneath the link starting with #print is hiding the button at first. Just move that whole block to style-print.css.
#print {
display: none;
}
Having that code within the page makes it so that the div with the id="print" is always hidden, regardless of the media. Putting it in the print stylesheet will make it so that when someone prints, that stylesheet it activated, it sees to hide anything with an id="print", and your button will go away in the print preview and also the printed page.

<link href="style-print.css" rel="stylesheet" media="print" type="text/css">
.disnone{
display: none;
}
.fr{
float: right;
}
<div class="fr" id="print">
<input id="print-bnt" type="button" onclick="callprint()"/>
</div>
<script>
function callprint(){
// js
addClass(document.getElementById("print"), "disnone");
// jquery
$("#print").addClass("disnone");
// print process js code ....
}
function viewprint(){
// js
removeClass(document.getElementById("print"), "disnone")
// jquery
$("#print").removeClass("disnone");
}
</script>
// javasciprt
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}