document.write to new window and into a 3 column table! Help Please!

[LowelG]

I need help with newWin.document.write. I can document.write to a new window, but I need it to seperate the information into three columns so that the user can print the new window containg the information that they entered into the form fields. This can not be used in conjunction with cgi, asp php or other. I need a java script to handle this (java script, .js, .class and such). I hope this makes since. Below you will find the code I have already written. Just copy and paste the code into HTML editor and save to view (IE only). Then create another page (blank) and save as PlayerRoster.htm. By doing this you will understand what it is I am trying to do. All this must be able to reside on the users's computer not on the internet. You can email me at [e-mail]

You may have to copy to notepad first and then select all and copy and then paste into the html editor for it to work right.

Here is the code:

<SCRIPT LANGUAGE="JavaScript">

<!--HIDE FROM INCOMPATIBLE BROWSERS

function openNewWin()

{

var newWin= window.open("PlayerRoster.htm","", "height=435,width=600,status,menubar,scrollbars,resizable,titlebar");

newWin.document.write("Team Roster" + "<br>");

newWin.document.write("-------------" + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("Players Name" + "");

newWin.document.write("Uniform #" + " ");

newWin.document.write("Position " + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("1. " + rosterForm.p1.value + "");

newWin.document.write("" + rosterForm.p2.value + "");

newWin.document.write("" + rosterForm.p3.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("2. " + rosterForm.p4.value + "");

newWin.document.write("" + rosterForm.p5.value + "");

newWin.document.write("" + rosterForm.p6.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("3. " + rosterForm.p7.value + "");

newWin.document.write("" + rosterForm.p8.value + "");

newWin.document.write("" + rosterForm.p9.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("4. " + rosterForm.p10.value + "");

newWin.document.write("" + rosterForm.p11.value + "");

newWin.document.write("" + rosterForm.p12.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("5. " + rosterForm.p13.value + "");

newWin.document.write("" + rosterForm.p14.value + "");

newWin.document.write("" + rosterForm.p15.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("6." + rosterForm.p16.value + "");

newWin.document.write("" + rosterForm.p17.value + "");

newWin.document.write("" + rosterForm.p18.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("7." + rosterForm.p19.value + "");

newWin.document.write("" + rosterForm.p20.value + "");

newWin.document.write("" + rosterForm.p21.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("8. " + rosterForm.p22.value + "");

newWin.document.write("" + rosterForm.p23.value + "");

newWin.document.write("" + rosterForm.p24.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("9. " + rosterForm.p25.value + "");

newWin.document.write("" + rosterForm.p26.value + "");

newWin.document.write("" + rosterForm.p27.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("10. " + rosterForm.p28.value + "");

newWin.document.write("" + rosterForm.p29.value + "");

newWin.document.write("" + rosterForm.p30.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("11. " + rosterForm.p31.value + "");

newWin.document.write("" + rosterForm.p32.value + "");

newWin.document.write("" + rosterForm.p33.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("12. " + rosterForm.p34.value + "");

newWin.document.write("" + rosterForm.p35.value + "");

newWin.document.write("" + rosterForm.p36.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("13. " + rosterForm.p37.value + "");

newWin.document.write("" + rosterForm.p38.value + "");

newWin.document.write("" + rosterForm.p39.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("14. " + rosterForm.p40.value + "");

newWin.document.write("" + rosterForm.p41.value + "");

newWin.document.write("" + rosterForm.p42.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("15. " + rosterForm.p43.value + "");

newWin.document.write("" + rosterForm.p44.value + "");

newWin.document.write("" + rosterForm.p45.value + "<br>");

newWin.document.write(" " + "<br>");

newWin.document.write("<INPUT TYPE=\"button\" NAME=\"Close\" VALUE=\"Close \" onClick=\" window.close()\";>"); /*backslashes use to be able to show the close button in the new window*/

newWin.document.close;

}

function allowReset() {

return window.confirm("Go ahead and clear the form?")

}

function validation()

{

openNewWin();

}

//STOP HIDING FROM INCOMPATIBLE BROWSERS-->

</SCRIPT>

<p align="center"><font size="5" face="Vibrocentric" color="#FFFFFF">Team Roster</font></p>

<table border="0" cellspacing="0" width="100%">

<tr>

<td width="96%" valign="top" align="left"><font color="#FFFFFF">Fill in the

form fields below. When you are finished click on the submit button to get

a printable page. To print the new Player Roster page click on &quot;File&quot; on

the menu bar at the top of the new page and then select &quot;Print&quot;.</font></td>

<td width="4%" valign="top" align="left"></td>

</tr>

</table>

<table border="0" cellspacing="0" width="100%">

<tr>

<td width="100%">&nbsp;</td>

</tr>

</table>

<table border="0" cellspacing="0" width="100%">

<tr>

<td width="40%"><b><font color="#FFFF00" size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Players Name</font></b></td>

<td width="11%"><b><font color="#FFFF00" size="3">Uniform #</font></b></td>

<td width="49%"><b><font color="#FFFF00" size="3">Position</font></b></td>

</tr>

</table>

<table border="0" cellspacing="0" width="100%">

<tr>

<td width="92%" valign="top" align="left"><FORM NAME="rosterForm" >

<div align="left">

<TABLE border="0" width=716 height="718">

<tr>

<td width="298" height="25"><font color="#FFFFFF">1. <INPUT TYPE= "text" NAME="p1" SIZE=26></font></td>

<td width="72" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p2" SIZE=6></font></td>

<td width="338" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p3" SIZE=20></font></td>

</tr>

<tr>

<td width="238" height="25"><font color="#FFFFFF"> 2. <INPUT TYPE= "text" NAME="p4" SIZE=26></font></td>

<td width="50" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p5" SIZE=6></font></td>

<td width="320" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p6" SIZE=20></font></td>

</tr>

<tr>

<td width="220" height="25"><font color="#FFFFFF"> 3. <INPUT TYPE= "text" NAME="p7" SIZE=26></font></td>

<td width="73" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p8" SIZE=6></font></td>

<td width="315" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p9" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 4. <INPUT TYPE= "text" NAME="p10" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p11" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p12" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 5. <INPUT TYPE= "text" NAME="p13" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p14" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p15" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 6. <INPUT TYPE= "text" NAME="p16" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p17" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p18" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 7. <INPUT TYPE= "text" NAME="p19" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p20" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p21" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 8. <INPUT TYPE= "text" NAME="p22" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p23" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p24" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 9. <INPUT TYPE= "text" NAME="p25" SIZE=26></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p26" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p27" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 10. <INPUT TYPE= "text" NAME="p28" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p29" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p30" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 11. <INPUT TYPE= "text" NAME="p31" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p32" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p33" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 12. <INPUT TYPE= "text" NAME="p34" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p35" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p36" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 13. <INPUT TYPE= "text" NAME="p37" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p38" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p39" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 14. <INPUT TYPE= "text" NAME="p40" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p41" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p42" SIZE=20></font></td>

</tr>

<tr>

<td width="217" height="25"><font color="#FFFFFF"> 15. <INPUT TYPE= "text" NAME="p43" SIZE=25></font></td>

<td width="81" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p44" SIZE=6></font></td>

<td width="310" height="25"><font color="#FFFFFF"><INPUT TYPE= "text" NAME="p45" SIZE=20></font></td>

</tr>

<tr>

<td width="608" height="27" colspan="3"><div align="center">&nbsp;</div><div align="center"><font color="#FFFFFF"><INPUT TYPE= "reset" onClick="reset">

<INPUT TYPE= "button" NAME="submit" VALUE="Submit" onClick="validation()";></font></div></td>

</tr><tr><td width="608" height="21" colspan="3"><div align="center"><a href="#top"><font color="#FFFF00">Back to Top</font></a></div></td></tr>

</table>

</div>

</FORM>

</td>

<td width="3%" valign="top" align="left"></td>

</tr>

</table>

End Of Code:

[tgreer]

I haven't looked at this in detail, but you can layout it columns by using divs, can't you?

[LowelG]

I haven't looked at this in detail, but you can layout it columns by using divs, can't you?

I am a newbie at java (self teahing out of books).

I have tried several ways to pass the information from the form to the new document, but can't get it to seperate into appropriate columns. Wants to group everyting into one column (bunched together)

Example1:

Players name Uniform # Position
-------------------------------------------------

1. Lowel28leftfield

I have also tried dashes and dots, But because names can vary in length I get something like the example below.

Example 2:

Players name Uniform # Position
-------------------------------------------------

1. Lowel Goss.....28........leftfield

[tgreer]

JavaScript... very different from Java.

I should have some time tomorrow to work up some sample code.

[LowelG]

Live example at: http://www.fightingdragons.org/player_roster_form.htm

[LowelG]

Now I know writing cookie scripts is a daunting task one I don't personally like to do, but what if basic cookie-place and cookie-retrieve scripts could do this? I'm not sure if passing variables in this manner is possible to achieve what i need. Any thoughts on this? Anyone?

[eagleeye]

You may want to try looking at http://javascript.internet.com/cookies/ for genral cookie scripts which if you understand some of other JavaScript stuff you can find out for setting and getting the cookies, sorry but I can't find the example that I learned it from and I'm away from my home computer, that has my cookies exmples on it, when I return home I'll try to find the example and post it around Monday.