How To Create An Instant User Defind Page [Archive] - Lissa Explains it All: Web Design Forums

kiwee

10-20-2005, 07:25 PM

in this tutorial I will teach you how to make create a form that, when filled in, will create a page according to your choices in javascript. (the page will not be eternal though)

ok, lets go;

step 1 - Basic Stuff

start by making the basic HTML document;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>
<BODY>
<FORM NAME=form>

</FORM>
</BODY>
</HTML>

now, within the <script> tags put this;
(the bits in Red are the bits you can edit.)

function gen()
{
win=window.open("","win","toolbar=0,location=0,status=0,menubar=0,scrollbars =0,resizable=1,width=200,height=200")

}

change the red bits to what you want the new window to look like, for each one 0 means no, and 1 means yes.

please see the next post for step 2 - Form Content

kiwee

10-20-2005, 07:26 PM

step 2 - Form Content

we are going to make the user able to pick the background color, the page title, and the main content

for the user to choose the title:

within the <form> tags put this;

Page Title (the bit in the very top bar, along with the minimise button etc... and the big text along the top of the page):<BR><INPUT TYPE="text" NAME="pagetitle" SIZE="20">

the stuff that the user enters into this text box we shall call 'pagetitle'

for the user to choose the background color:
within the <form> tags put this;

Background Color: <br><select name="backg">
<option value="blue" selected="selected">blue</option>
<option value="black">black</option>
<option value="white">white</option>
<option value="orange">orange</option>
<option value="green">green</option></select>

the stuff that the user selects into this select box we shall call 'backg'

now lastly we need to add the main content box;

below the other form options add this;

Page Content:<BR><TEXTAREA NAME="content" ROWS="5" COLS="40">any defalt text</TEXTAREA><BR><BR>

you can change the size and the defalt text

now we need to add a button to process all the information. this is quiet complex, but i will try as hard as i can to explain it;

put this in the bottom of the form;

<BUTTON ONCLICK="gen(this.form.pagetitle.value, this.form.backg.value, this.form.content.value)">Create Page</BUTTON>

the gen(...) bit referes to the function at the top, called gen. and this button is telling it to read the value of each form section.

now, in order for the code to work, we need to tell the function which variables to recognise (pagetitle, backg, textc, and content)

so, within the brackets (, ) of the function 'gen' put this;

pagetitle, backg, content

now under where it says;

win=window.open("","win","toolbar=0,location=0,status=0,menubar=0,scrollbars =0,resizable=1,width=200,height=200")

put this code (I explain each line with the comment tag's [ '//' ] )

//create html document, and add user_defind title
win.document.write("<html><head><title>"+pagetitle);
//close <title> tag and <head> tag and open <body> tag also change page bgcolor
win.document.write("</title></head><body bgcolor='"+backg+"'>");
//make the header at the top of the page
win.document.write("<center><h1>"+pagetitle+"</h1>");
//make the page content
win.document.write("<br>"+content);
//close <body> tag and <html> tag
win.document.write("</body></html>");

there you have it, so altogether, this is your code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form>
Page Title (the bit in the very top bar, along with the minimise button etc... and the big text along the top of the page):<BR><INPUT TYPE="text" NAME="pagetitle" SIZE="20">
<BR><BR>

Background Color:
<SELECT NAME="backg">
<OPTION>blue
<OPTION>black
<OPTION>white
<OPTION>orange
<OPTION>green
</SELECT>

<BR><BR>

Page Content:<BR><TEXTAREA NAME="content" ROWS="5" COLS="40"></TEXTAREA><BR><BR>

<BUTTON ONCLICK="gen(this.form.pagetitle.value, this.form.backg.value, this.form.content.value)">Create Page</BUTTON>

</FORM>
</BODY>
</HTML>

now, you can mess around with that, and make it bigger and better :D

please, if you are going to put your version of this code on the web please add;



into the HTML, thanks

PM me if you have any quirys or comments, i will try and help if it is not working for you.