Forms

@codedreamerAug 04.2007

Hello, I’m fairly new and I’m not even sure if I’m posting in the correct forum board part of this whole forum, but hopefully I am. Ha! If not, please slap me. Anyways, I’m looking into creating a type of form where you can do the following as examples:

Name: Blah
Street Address: Blah blah
State: Blah
City: Blah
Zip code: blah

And then other things as well. Now this is for someone to be able to input information, and then after you submit what there is to fill in on the page. You click either submit, view or whatever there would be at the bottom of the page. It would go to a new page, and it would be shown the way I would have it set up, and it would be like a letter type deal. The information would be plugged in where it goes into the letter. But I also want it to be shown with a picture of any sort, you know like if you were to create a letter in Microsoft Word, and you would put a image in the right hand corner, or left hand corner and it would just make it little more appealing sort of thing.

Now I would like the person to be able to edit any information that they provided, say they mistyped some thing, without having to refill the WHOLE form they can just hit edit, or go back and everything is there but they can edit what they want in the form.

After they edit, or like what they see. I want them to have the option to print off what it shown to them on the page.

I hope this makes sense?

Now where, or how would I go about doing this? I’m very curious, and anixious to get started. Would this be HTML, or a number of different things put together?

I’d highly appreciate your help! If you can, can you get back with me ASAP on this? ? THANKS!

to post a comment

HTML

6 Comments(s) _↴

@nshiellAug 04.2007 — #If your not actually processing the data just typing it in and printing off I suppose this could be done in HTML only.

If you don't know HTML then u have two options avalibale use a What You See Isd What You Get (WYSIWYG) editor like Dreamweaver.

OR

Learn HTML

www.w3schools.com has a good tutorial

@Declan1991Aug 04.2007 — #To do some of the latter stuff you would need PHP as well, so learn HTML first, and then PHP.

@codedreamerauthorAug 04.2007 — #Okay, a question. This is some thing kind of what I want to do take a look at the this site if you would, and then just randomly put characters into each box if you would. Then click submit, and then you'll see what I'm talking about.

A form I want

That is exactly what I want to do. So I'm assuming all I need to use is javascript? At the bottom of the page it says "The Script by Javascript Source", but I'm not even sure what the code is called exactly. So any suggestions on this, would be highly appreciated! This is exactly what I want to do, but differently of course.

@Declan1991Aug 04.2007 — #I'm not sure how to to be able to reset any of the fields but this is written with only javascript and the things in the popup could be altered.

[code=html]
 <html>
 <head>
 <title>
 </title>
 
 
 <script language="javascript" type="text/javascript">
 function enter()
 {var set = new Array();
 set[0] = document.getElementById("name").value;
 set[1] = document.getElementById("street").value;
 set[2] = document.getElementById("state").value;
 set[3] = document.getElementById("city").value;
 set[4] = document.getElementById("zipCode").value;
 var names = new Array();
 names[0] = "Name";
 names[1] = "Street";
 names[2] = "State";
 names[3] = "City";
 names[4] = "Zip Code";
 
 var myWindow = window.open("","My Form","height=300,width=600,scrollbar=0");
 for (x = 0; x < set.length; x++)
 {myWindow.document.write(names[x]+": "+set[x]+"<br />");
 }
 myWindow.document.write("<br /><br /><form>"+
 "<input id='submit' type='button' onclick='reset();' value='Reset' />"+
 "</form>"); 
 }
 
 </script>
 
 </head>
 
 
 
 
 <body>
 <form>
 <table>
 
 <tr>
 <td>Name:</td><td><input id="name" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>Street:</td><td><input id="street" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>State:</td><td><input id="state" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>City:</td><td><input id="city" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>Zip Code:</td><td><input id="zipCode" type="text" size="40" /></td>
 </tr>
 <tr>
 <td><input id="submit" type="button" onclick="enter();" value="Submit" /></td><td></td>
 </tr>
 </table>
 </form>
 </body>
 </html>
 [/code]

@codedreamerauthorAug 05.2007 — #Okay, well here's a code that I found and it does exactly what I want. It's a madlib javascript code. So I altered it to what I want just playing around with it, and for some reason I'm having a error on the page. It won't open the window that shows the letter. I hope that makes sense? Here's what it looks like that I uploaded: Click here to view the one I made.

Now I'm assuming it's supposed to open up, right? Well it doesn't. It runs a error. So is there some thing I'm doing wrong?

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 
 <HEAD>
 
 <SCRIPT LANGUAGE = "JavaScript">
 
 <!-- This script and many more are available free online at -->
 <!-- The JavaScript Source!! http://javascript.internet.com -->
 
 <!-- Begin 
 function create(form) { 

 if (confirm("Are you sure?")) { 

 storyWin = window.open("","StoryWin","toolbar=no,width=320,height=325,directories=no,status=yes,scrollbars=yes,resize=no,menubar=no"); 

 with (storyWin.document) { 

 writeln ("<p><b>Dear " + form.input1.value + ",
 
 <p>Merry Christmas! You have been a very good " + form.input2.value + " this year, and I want to thank you for all that you do to help your parents.
 <br>I know that you have been a good student this year in " + form.input3.value + "’s class and that " + form.input4.value + " enjoys having you in his/her class. You are a great " + form.input5.value + ".
 <br><br>
 <p>I have been very busy at the North Pole preparing for Christmas. Rudolph is excited about leading the Christmas sleigh as he always does. The other reindeer Dasher, Dancer, Prancer, Vixen, Comet, Cupid, Donnen and Blitzen are also flying around the North Pole, practicing for the big night. Did you know that Dancer is my fastest reindeer? Dancer and Rudolph love to have races around the North Pole. Mrs Claus and I watch them and we cheer them on. 
 <br><br>
 <p>Christmas will soon be here, if you are like me you are counting the days until the twenty-fifth of December is finally here. Give your brother " + form.input6.value + " and your sister " + form.input7.value + " a big hug from me. Give your dog " + form.input8.value + " a couple of nice pats on his head from me also. I will be sure to pat " + form.input8.value + " when I come to " + form.input9.value + " on Christmas Eve. 

 <br><br>
 <p>Remember to put out a cookie or two on Christmas Eve for me, or a nice fat carrot for the reindeer. I will be stopping by your house well after you have gone to sleep, so I will not see you, but please know that I will be thinking about you. 
 <br>
 <br>
 Merry Christmas!
 <br>
 <br>
 Sincerely,
 Santa Claus
 <br>"); 

 writeln ("<BR>"); 

 } 

 }
 }
 // End -->
 </SCRIPT>
 
 
 </head>
 
 <body>
 
 <CENTER>
 <FORM>
 <TABLE BORDER = 1 CELLPADDING = 0 bordercolor="#006600">
 <TR>
 <TD>
 <b>First Name :</b>
 <TD><INPUT TYPE="text" NAME="input1" size=45><BR>
 </TD></TR><TR>
 <TD>
 <b>Girl or Boy? :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input2" size=45 ><BR>
 </TD></TR><TR>
 <TD>
 <b>Teacher's Name :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input3" size=45 ><BR>
 </TD></TR><TR>
 <TD>
 <b>Teacher (he/she?) :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input4" size=45 ><BR>
 </TD></TR><TR>
 <TD>
 <b>2 Accomplishments in School :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input5" size=45 ><BR>
 </TD></TR><TR>
 <TD>
 <b>Brother's Name :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input6" size=45 ><BR>
 </TD></TR><TR>
 <TD>
 <b>Sister's Name :</b>
 </TD>
 <TD>
 <INPUT TYPE="text" NAME="input7" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>Verb:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input8" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>Noun:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input9" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>Piece of Furniture:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input10" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>A Liquid:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input11" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>Number:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input12" size=45 ><BR>
 </TD></TR><TR><TD>
 <b>Noun:</b>
 </TD><TD>
 <INPUT TYPE="text" NAME="input13" size=45 >
 </TD>
 </TR>
 <TR>
 <TD>
 </TD>
 </TR>
 </TABLE>
 <BR></B>
 <INPUT TYPE = "button" VALUE="Create Letter" onClick = "create(this.form)">
 </FORM>
 </CENTER>
 
 <p>
 
 </body>
 </html>
 [/CODE]

@codedreamerauthorAug 05.2007 — #Omg, nevermind. I'm so freaking stupid. I am using dreamweaver to do this. Right? Well what I was doing wrong is instead of File>New>HTML it's supposed to be File>New>Javascript

DURR ME LOL

Also in #HTML _↴

Defining a link / hover style with CSS?Form input text box that doesn't clear?white space in html file

Success!

Help @codedreamer spread the word by sharing this article on Twitter...

Tweet This

Forms

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Forms

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴