Help creating order form

**thetestingsite** · 05-17-2008, 11:21 PM

Well, a dropdown (select) list would be like so:

Code:

<select name="selectNameHere">
 <option value="someValue">Some Text Here</option>
 <option value="someValue2">some More Text</option>
</select>

of course, change the highlighted to suite your needs.

Hope this helps.

**Twilightrose917** · 05-18-2008, 12:09 AM

it does, thank you. (again)

...now I just need to do the rest of the php work.... O.o

**Twilightrose917** · 05-18-2008, 12:36 AM

... I put in another checkbox option under 'services', and I just noticed that the box itself is not aligned with the others. Is there any way I can fix that? Here's the code for the page, just in case you need to look at it:

HTML 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=UTF-8" />

<title>Ordering</title>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<style type="text/css">

<!--
body,td,th {
	font-family: Papyrus;
	font-size: 16pt;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
a {
	font-size: 14pt;
	color: #FF0000;
}
a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: 

underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
}
a:active {
	

text-decoration: underline;
}
.style1 {color: #FF0000}
.style2 {color: #3300CC}
-->

.cssform p{
width: 550px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed #990000;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some 

right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this 

attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 100px;
}

.hidden {
	display:none;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
</style>

</head>


<body>

<script language=JavaScript>

<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by 

DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Sorry, 

right-clicking isn't allowed.";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if 

(document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if 

(document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 

</script>

<table width="750" border="1" cellspacing="2" cellpadding="1" align="center">

  <tr>
    
<td width="85"><div align="center"><a href="index.html">Home</a></div></td>
    
<td width="136"><div align="center"><a href="about us.html">About Us</a></div></td>

<td width="247"><div align="center"><a href="our services.html">Available 

Services</a></div></td>
    
<td width="117"><div align="center"><a href="artwork.html">Artwork</a></div></td>
    
<td width="131"><div align="center"><a href="ordering.html">Ordering</a></div></td>
  
</tr>

</table>

<br><br>

<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Mailing Address:</label>
<textarea id="mailingaddress" rows="5" cols="25"></textarea>
</p>


<p>
<label for="services">Services:</label>
<input type="checkbox" name="services" value="logo_design" 

onClick="toggle_visibility(this.value)" /> Logo Design<br />
<input type="checkbox" name="services" value="business_card" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Business Card Design <br />
<input type="checkbox" name="services" value="web_graphics" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Web Graphics <br />
<input type="checkbox" name="services" value="flyers" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Flyers/Handouts <br />
<input type="checkbox" name="services" value="notecards" class="threepxfix" 

onClick="toggle_visibility(this.value)" /> Notecards <br />
<input type="checkbox" name="services" value="Buying_Artwork" 

onClick="toggle_visibility(this.value)" /> Artwork for Sale<br />
<input type="checkbox" name="services" value="other" class="threepxfix" 

onClick="toggle_visibility(this.value)"	/> Other <br />
</p>

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
 <br>Company Name: <br> <input type="text"></input><br>
<br>Business Description: <br><textarea id="description"></textarea>
</p>

<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
<br><br>If you have a logo and want it used on your card, we will need a copy of it. If you 

do not have a logo but want one, please fill out the information for Logo Design as 

well.<br>
<br>Company Name:<br><input type="text"></input><br>
<br>Company Contact:<br><textarea id="companycontact">(Employee/Manager) Name:
Phone #:
Fax # (if applicable):
(company) Email address:
Anything else you want on the card:</textarea>
</p>

<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
<br>
Again, this section is mainly intended for forum signatures/ avatars. If you have something 

else in mind, please fill out the 'web graphic' option under the 'other' section.<br>
<br>Forum Display Name:<br><input type="text"></input><br>
<br>Please either describe a basic outline of what you want, or give us something to base 

the image off of:<br><textarea id="sig/avatar description"></textarea>
</p>

<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
<br>What is the event?<br><input type="text"></input>
<br>What is it for?<br><input type="text"></input>
<br>Who is it for?<br><input type="text"></input>
</p>

<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
<br>Name(s) of artwork to be included:<br>(3 Max, please.)<br>
<textarea id="selectedartwork">1)
2)
3)
</textarea><br>
<br>If you want a custom image, please fill out the 'custom image' option under the 'other' 

section, and describe what you want. Alyssa or Theresia will do their best to complete what 

you describe.<br>
<br>Do you wish to buy the artwork with the notecards?<br>
<select name="y/n">
 <option value="1">~please select~</option>
 <option value="2">Yes</option>
 <option value="3">No</option>
</select>
</p>

<p id="Buying_Artwork" class="hidden">
<label for="services">Artwork for Sale:</label>
<br>Name(s) of artwork you wish to buy:
<br><textarea></textarea><br>
<br>If you want something specific drawn to buy, fill out the 'custom image' option under 

the 'other' section.
</p>

<p id="other" class="hidden">
<label for="services">Other:</label>
<br>What do you need?<br>
<select name="otherservice">
 <option value="1">~select one~</option>
 <option value="2">Web Graphic</option>
 <option value="3">Custom Image</option>
 <option value="4">Other Service</option>
</select><br>
<br>Please Describe:
<br><textarea id="description"></textarea>
</p>

<br>
<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</div>

<br>

</form>
</body>
</html>

**thetestingsite** · 05-18-2008, 01:41 AM

I just tried the code you posted and could not find the issue you were describing. For further assistance, please post a link to your problem page. To see the page that I have uploaded, please refer to http://www.thetestingsite.net/test/dd/twilight.html

**Twilightrose917** · 05-18-2008, 02:14 AM

Maybe I didn't describe it well enough... the checkbox with 'artwork for sale' next to it is aligned slightly to the left of all the other checkboxes. It's kind of hard to see, but it was on the one you posted as well...

I would post a link to the page, but I don't have this site published yet...

**Twilightrose917** · 05-18-2008, 02:34 AM

Never mind - I just figured it out. I didn't put in

HTML Code:

class="threepxfix"

to the input tag...

**Jas** · 05-19-2008, 01:53 AM

Looks like your moving forward in the coding world, Twilightrose917. One thought, though, for future reference:

Code:

<script language=JavaScript>

Has been depreciated by the W3C. You should use:

Code:

<script type="text/javascript">

for script tags. Not a big deal by any means, but I thought I would mention it. It's good to get into the habbit of coding everything properly early on, as opposed to after you're "finished" learning, like me

**Twilightrose917** · 05-19-2008, 01:48 PM

Okay: here's the most current version...

HTML 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=UTF-8" />

<title>Ordering</title>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<style type="text/css">

<!--
body,td,th {
	font-family: Papyrus;
	font-size: 16pt;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
a {
	font-size: 14pt;
	color: #FF0000;
}
a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
}
.style1 {color: #FF0000}
.style2 {color: #3300CC}
-->

.cssform p{
width: 550px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed #990000;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 95px;
}

.hidden {
	display:none;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}
</style>

</head>
<body>
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Mailing Address:</label>
<textarea id="mailingaddress" rows="5" cols="25"></textarea>
</p>


<p>
<label for="services">Services:</label>
<input type="checkbox" name="services" value="logo_design" onClick="toggle_visibility(this.value)" /> Logo Design<br />
<input type="checkbox" name="services" value="business_card" class="threepxfix" onClick="toggle_visibility(this.value)" /> Business Card Design <br />
<input type="checkbox" name="services" value="web_graphics" class="threepxfix" onClick="toggle_visibility(this.value)" /> Web Graphics <br />
<input type="checkbox" name="services" value="flyers" class="threepxfix" onClick="toggle_visibility(this.value)" /> Flyers/Handouts <br />
<input type="checkbox" name="services" value="notecards" class="threepxfix" onClick="toggle_visibility(this.value)" /> Notecards <br />
<input type="checkbox" name="services" value="Buying_Artwork" class="threepxfix"
onClick="toggle_visibility(this.value)" /> Artwork for Sale<br />
<input type="checkbox" name="services" value="other" class="threepxfix" onClick="toggle_visibility(this.value)"	/> Other <br />
</p>

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
 <br>Company Name: <br> <input type="text"></input><br>
<br>Business Description: <br><textarea id="description"></textarea>
</p>

<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
<br><br>If you have a logo and want it used on your card, we will need a copy of it. If you do not have a logo but want one, please fill out the information for Logo Design as well.<br>
<br>Company Name:<br><input type="text"></input><br>
<br>Company Contact:<br><textarea id="companycontact">(Employee/Manager) Name:
Phone #:
Fax # (if applicable):
(company) Email address:
Anything else you want on the card:</textarea>
</p>

<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
<br>
Again, this section is mainly intended for forum signatures/ avatars. If you have something else in mind, please fill out the 'web graphic' option under the 'other' section.<br>
<br>Forum Display Name:<br><input type="text"></input><br>
<br>Please either describe a basic outline of what you want, or give us something to base the image off of:<br><textarea id="sig/avatar description"></textarea>
</p>

<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
<br>What is the event?<br><input type="text"></input>
<br>What is it for?<br><input type="text"></input>
<br>Who is it for?<br><input type="text"></input>
</p>

<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
<br>Name(s) of artwork to be included:<br>(3 Max, please.)<br>
<textarea id="selectedartwork">1)
2)
3)
</textarea><br>
<br>If you want a custom image, please fill out the 'custom image' option under the 'other' section, and describe what you want. Alyssa or Theresia will do their best to complete what you describe.<br>
<br>Do you wish to buy the artwork with the notecards?<br>
<select name="y/n">
 <option value="1">~please select~</option>
 <option value="2">Yes</option>
 <option value="3">No</option>
</select>
</p>

<p id="Buying_Artwork" class="hidden">
<label for="services">Artwork for Sale:</label>
<br>Name(s) of artwork you wish to buy:
<br><textarea></textarea><br>
<br>If you want something specific drawn to buy, fill out the 'custom image' option under the 'other' section.
</p>

<p id="other" class="hidden">
<label for="services">Other:</label>
<br>What do you need?<br>
<select name="otherservice">
 <option value="1">~select one~</option>
 <option value="2">Custom Image</option>
 <option value="3">Web Graphic</option>
 <option value="4">Other Service</option>
</select><br>
<br>Please Describe:
<br><textarea id="description"></textarea>
</p>

<br>
<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</div>

<br>

</form></body>

oh, and guess what! This project (the website) was due in my Commercial Art class today, and I got a 100% !!!! My teacher was really impressed with the work that we've done on this page... so thanks again, because without you guys helping me I wouldn't have been able to do this.

**Medyman** · 05-19-2008, 03:39 PM

The next step would be to link some PHP to the form. We do this by setting an action within the form tag's action= attribute.

Like so:

Code:

<form id="myform" class="cssform" action="order.php" method="POST">

Next, create a new document called order.php and save it to the same directory as this form is in. Open up order.php and insert the following code(I'll explain in below).

Code:

<?php

$name = $_POST['name'];
$email = $_POST['emailaddress'];
$address = $_POST['mailingaddress'];

if (isset($_POST['services1'])) {
	$company_name = $_POST['comany_name'];
	$company_description = $_POST['company_description'];
}


/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $company_name . "<br>";

?>

You should notice a similar structure to a lot of the code. That's because you're basically doing the same thing over and over again -- retriving the contents of the input fields on the HTML page.

Let's take this line (line 4), for example:

Code:

$email = $_POST['emailaddress'];

In English, this says: create a variable called $email and set it equal to the contents that were "posted" from the field on my HTML page with the name of "emailaddress"

In order to work with the data (email it, save it to a database, etc...) that is entered onto your order form, you'll need to assign each to a variable.

The line above will pull the contents from the following element:

Code:

<input type="text" name="emailaddress" value="" />

Notice the use of name= instead of id=. Id attributes are only necessary if you're applying unique styling via CSS or if you're doing something to that element with JavaScript. If you want to use some client-side validation, you might need to add the id's back in. But for now, change the id= to name=.

Next, to the task-specific input fields. Since most of your fields are hidden at any given time, it makes no sense to parse the entire form and save empty fields. It makes much more sense to see which service the user was interested in and then see if they filled in anything to the service-specific fields.

So, say someone was intersted in logo design. They would check the logo design checkbox on the HTML page and then complete the Company Name & Description fields. On the PHP form, we first use an if statement to test to see if logo design is checked:

Code:

if (isset($_POST['services1'])) {

In English, again, this says that if there is a value from the services1 field (name= attribute), execute the following operations. isset is testing for exactly what it seems like. Is the value of services1 set (i.e. is it complete? Does it have a value? etc...)?

If it is, we parse the logo design specific fields:

Code:

if (isset($_POST['services1'])) {
	$company_name = $_POST['comany_name'];
	$company_description = $_POST['company_description'];
}

All of your checkboxes currently have a name= attribute of services. You'll want to make these unique and something different than the value= attribute. For my example, I use the logo_design fields with markup of:

Code:

<input type="checkbox" name="services1" value="logo_design" onClick="toggle_visibility(this.value)" /> Logo Design

Code:

Company Name: <br> <input type="text" name="company_name">
Business Description: <br><textarea name="company_description"></textarea>

Te rest of the code is just to test the output, so you can have some visual cue that it executed correctly:

Code:

/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $company_name . "<br>";

echo, like the name implies, echoes or displays the value of that variable.

A note about your HTML. You're writing text input fields like so:

Code:

<input type="text"></input>

You don't need the closing input tag (</input>). I see that you're using XHTML Transitional (though, that is an incorrect DTD in this case. You should be using a HTML DTD).

Even with a XHTML DTD, you would end the input tag like so, not how you did it:

Code:

<input type="text" />

Notice the backslash before the closing bracket.

**Twilightrose917** · 05-19-2008, 11:30 PM

Originally Posted by Medyman

The next step would be to link some PHP to the form. We do this by setting an action within the form tag's action= attribute.

Like so:

Code:

<form id="myform" class="cssform" action="order.php" method="POST">

Next, create a new document called order.php and save it to the same directory as this form is in. Open up order.php and insert the following code(I'll explain in below).

Code:

<?php

$name = $_POST['name'];
$email = $_POST['emailaddress'];
$address = $_POST['mailingaddress'];

if (isset($_POST['services1'])) {
	$company_name = $_POST['comany_name'];
	$company_description = $_POST['company_description'];
}


/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $company_name . "<br>";

?>

In order to work with the data (email it, save it to a database, etc...) that is entered onto your order form, you'll need to assign each to a variable.

The line above will pull the contents from the following element:

Code:

<input type="text" name="emailaddress" value="" />

Notice the use of name= instead of id=. Id attributes are only necessary if you're applying unique styling via CSS or if you're doing something to that element with JavaScript. If you want to use some client-side validation, you might need to add the id's back in. But for now, change the id= to name=.

Okay I did this part, and I understood it fairly well. Although I do have one question - in the php part:

Code:

if (isset($_POST['services1'])) {
	$company_name = $_POST['comany_name'];
	$company_description = $_POST['company_description'];
}

Will I have to do an 'isset' thing for each of the checkboxes? That part kind of confused me, because I can see how that relates to the logo design part, but I didn't see anything for the other services. I'm assuming if something is needed for each of the checkboxes then we'll work on those later? I guess I don't know...

Next, to the task-specific input fields. Since most of your fields are hidden at any given time, it makes no sense to parse the entire form and save empty fields. It makes much more sense to see which service the user was interested in and then see if they filled in anything to the service-specific fields.

So, say someone was intersted in logo design. They would check the logo design checkbox on the HTML page and then complete the Company Name & Description fields. On the PHP form, we first use an if statement to test to see if logo design is checked:

Code:

if (isset($_POST['services1'])) {

In English, again, this says that if there is a value from the services1 field (name= attribute), execute the following operations. isset is testing for exactly what it seems like. Is the value of services1 set (i.e. is it complete? Does it have a value? etc...)?

If it is, we parse the logo design specific fields:

Code:

if (isset($_POST['services1'])) {
	$company_name = $_POST['comany_name'];
	$company_description = $_POST['company_description'];
}

All of your checkboxes currently have a name= attribute of services. You'll want to make these unique and something different than the value= attribute. For my example, I use the logo_design fields with markup of:

Code:

<input type="checkbox" name="services1" value="logo_design" onClick="toggle_visibility(this.value)" /> Logo Design

Code:

Company Name: <br> <input type="text" name="company_name">
Business Description: <br><textarea name="company_description"></textarea>

I understood and did this part too - changed all the 'id' attributes to 'name', and called them all something different. Do you need to see my script again so you know what I changed them to?

The rest of the code is just to test the output, so you can have some visual cue that it executed correctly:

Code:

/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $company_name . "<br>";

echo, like the name implies, echoes or displays the value of that variable.

slightly confused here - is this part of the code needed for the actual site, or is it just to test it until I get it published or something? (forgive my ignorance)

A note about your HTML. You're writing text input fields like so:

Code:

<input type="text"></input>

You don't need the closing input tag (</input>). I see that you're using XHTML Transitional (though, that is an incorrect DTD in this case. You should be using a HTML DTD).

Even with a XHTML DTD, you would end the input tag like so, not how you did it:

Code:

<input type="text" />

Notice the backslash before the closing bracket.

Thanks for correcting me here - I learned (extremely) basic coding several years ago, so I am used to doing the closing tag. I guess I don't know how long ago that changed, but still... And um.... I really have no idea what the rest of what you said means. (XHTML Transitional, XHTML, DTD, HTML DTD... all of that.) Could you explain them please? Thanks.

Thread: Help creating order form

Thread Tools

Search Thread

The Following User Says Thank You to thetestingsite For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions