New window with custom content - JS - JavaScript and CSS

#1
domestic

Posted 24 April 2007 - 05:12 AM

Learning Programmer

Members
44 posts

OK, maybe the titles not the best but here goes.

This is the current page.

<html>

<!--

By [hidden]

April 2007

Licensed for use by [hidden].

email: [hidden]

-->

<head>

<title>TEKNEK Takt Timer by [hidden]</title>

<style type="text/css">

<!--

.style1 {

	font-size:28px;

	text-align:center;

	font-family: Tahoma, Arial;

	font-weight: bold;

}

.style2 {

	font: Tahoma, Arial;

	font-size:14px;

	text-align:left

}

.style3 {

	font: Tahoma, Arial;

	font-size:36px;

}

-->

</style>

</head>

<script language="JavaScript">

<!-- Hide JavaScript from old browsers


function isValidForm(form){

	

	//Check that none of the fields are empty

	if(form.upy.value==""){

		window.alert("You must enter the number of units produced per year.");

		//form.upy.focus();

	}

	if(form.dpy.value==""){

		window.alert("You must enter the number of days worked per year.");

		form.upy.focus();

	}

	if(form.mpw.value==""){

		window.alert("You must enter the number of minutes worked per week.");

		form.upy.focus();

	}

	if(form.dpw.value==""){

		window.alert("You must enter the number of days worked per week.");

		form.upy.focus();

	}

	if(form.eff.value==""){

		window.alert("You must enter the efficiency.");

		form.eff.focus();

	}

	//Calculation for takt time

	

	//Link to a new window displaying the Takt time

	

}	

	

//End hiding-->

</script>

<noscript>

<p class="style3">This site requires JavaScript! Please turn this on, or contact your IT Department for assistance</p>

</noscript>


<body>


<p class="style1">Welcome to the TEKNEK Takt Timer</p>


<form onsubmit="isValidForm(this);">

<p class="style2">Please enter all data requested</p>

<br>

<p class="style2">Units produced per year <input type="text" name="upy" size="10">Units</p>

<p class="style2">Days worked per year <input name="dpy" type="text" size="10">Days</p>

<p class="style2">Minutes worked wer week <input name="mpw" type="text" size="10">Minutes</p>

<p class="style2">Days worked per week <input name="dpw" type="text" size="10">Days</p>

<p class="style2">Production efficiency <input name="eff" type="text" size="5">%</p>

<br>

<p class="style2"><input type="submit" value="Submit">

<input type="reset" value="Clear"></p>

</form>

</body>

</html>

Basically the idea is you input the required stuff and it outputs the Takt time. Dont worry about the calculation and stuff tho, its a japenese way of making projects efficient.

Anyways, what I was looking to do was that when you click "Submit", it checks the fields (if empty then screw you), and then it will calculate the takt time and hows the results in a new window. However, I am unsure as to whether I can open a new window and set its content from outside that window.

If however, the conclusion is Nope, you cant make a new window with custom content, then how can I get it to show the takt time etc on this window eg is there a
"[object].write([variable]);
command or something. Ideally I want to do this in JavaScript.

Thanks

Programming Languages: Java, VB6, VB2005 (.NET2)
Web Languages: HTML, CSS, JS

Website: http://abdn.ac.uk/~u41am6

Opportunity is missed by most people because it is dressed in overalls and looks like work.

#2
Chan

Posted 24 April 2007 - 09:45 AM

Programming Professional

Members
204 posts

Ahh, that is easy. I had this in class. I'll paste the info.


<html>

<head>

<title>"Dynamic Window with a URL"</title>


<script language="JavaScript">

<!-- Hide


  var myBars = 'directories=yes,location=yes,menubar=yes';

      myBars += ',status=yes,titlebar=yes,toolbar=yes';

  var myOptions = 

       'scrollbars=yes,width=380,height=440,resizable=yes';  

  var myFeatures = myBars +','+myOptions;


  function openWindow() {


    var newWin = window.open('', 'myDoc', myFeatures);


    with (newWin.document) {


      writeln("<html>");

      writeln("<head>");

      writeln("<title>Dynamic HTML Page</title>");


      writeln("<script language='JavaScript'>");

      writeln(" function msg() {");

      writeln("  alert('Hello'); }");

      writeln("</script>");


      writeln("<style type='text/css'>");

      writeln(" body { font-family: arial;");

      writeln("        font-size: 10pt; ");

      writeln("        color: yellow; ");

      writeln("        background: red; }");

      writeln("</style>");


      writeln("</head>");

      writeln("<body>");


      writeln("<h3>This is a Dynamic Page</h3><br />");


      writeln("<br /><br />");


      writeln("<form name='form1'>");


      writeln("<input type=button value='Display Message'");

      writeln("name='DisplayMessage'");

      writeln("onclick='msg()'>");


      writeln("<br /><br />");


      writeln("<input type=button value='Close Window'");

      writeln("name='CloseWin'");

      writeln("onclick='self.close()'>");


      writeln("</form>");


      writeln("</body>");

      writeln("</html>");


      close();

    } 

  }


// -->

</script>

</head>


<body>

<form name="form1">

<input type = "button" 

   name="openWin" value="Open Window" onclick="openWindow()">  

</form>


</body>     

</html>

This will create a dynamic page which is what I believe you are requesting. Let me know.

#3
domestic

Posted 24 April 2007 - 10:57 AM

Learning Programmer

Members
44 posts

Cheers chan! Wasn't 100% wha I was looking for, but it DOES allow me to do what I wanted so thats awesome!

Thanks!

#4
Guest_Jordan_*

Posted 24 April 2007 - 11:48 AM

Guests

domestic said:

Cheers chan! Wasn't 100% wha I was looking for

What else do you need? I may be able to help.

#5
domestic

Posted 24 April 2007 - 02:43 PM

Learning Programmer

Members
44 posts

Well, it wasnt what I had thought of originally, but it turns out this works BEAUTIFULLY. All I had to do was at "writeln(tt);" to add the tacktime to the window.

However, I do have another question and I guess ill just stick it here.

I'm trying to insert text into a table. Basically, instead of opening a new window, to insert the text into a table. I guess I would do this by adding a textarea into the table and then calling it to write into this. I think I know how to do this but, by all means, send me the code. Also, when done, I'll stick up a link to the finished content. Just so you can see how it worked out

Thanks guys!

#6
domestic

Posted 24 April 2007 - 03:11 PM

Learning Programmer

Members
44 posts

OK, well screw what I said above. I kinda got it working but now my problem is that when I insert the text into the textfield it disappears the second. And I have no idea why!!!

#7
Guest_Jordan_*

Posted 24 April 2007 - 03:26 PM

Guests

How are you writing it? It should look like:

document.formName.textBoxName.value = "Text";

And your HTML would look like:

<form name="formName">
<textarea name="textBoxName"></textarea>
</form>

Can you post your code?

#8
domestic

Posted 24 April 2007 - 06:56 PM

Learning Programmer

Members
44 posts

Cheers Jordan.

Ok the finished "product" is online here:Teknek Task Timer

And I can post the code here if you want.

#9
Guest_Jordan_*

Posted 27 April 2007 - 05:53 AM

Guests

Nice looking! Good Job!

#10
domestic

Posted 29 April 2007 - 01:15 AM

Learning Programmer

Members
44 posts

Just in case anyone cares, its now all just one page and has outputs on screen rather than the dynamic window. Thanks all the same Chan - I think they look cooler bt then again, what the boss says goes!

Cheers guys!

#11
rameshkumar

Posted 03 June 2007 - 11:08 PM

Newbie

Members
20 posts

domestic said:

Hi:)
this massage from india name ramesh kumar
basically it will work of text area i <h3>
<table border="01" cellspacing="50" cellWidth="50" cellheight="50">
<tr>
<tr Width="100" height="100"</tr>><td><input type="text" value=""></td></br>
<tr Width="100" height="100"</tr>><td><input type="text" value=""></td></br>
[quete]