Help creating order form

[Twilightrose917]

okay... this might be difficult to explain, but I'll try my best. I need to set up an order form in my website that will send a completed form to an email address when someone hits 'submit'. I also need the form to be... progressive? I think that's how to describe it... basically someone will pick an option in the first part, and then something else will come up depending on what they choose. I think if someone can give me the basic code for that I can figure out how to change it to whatever I need. (try and give the code in pieces though and PLEASE explain what each part does, if you can. That will help me understand it better...)

I had an idea of how to make the outline for the order form, but I don't know if it will work. If I make a table of some kind within my page, can I apply code to different parts to do the progressive thing I want in it and then email the table itself to me? Or is there an easier way, even if that would work?

If anyone is confused about anything in this post, ask me about it and I'll try to explain as best as I can.......

[Medyman]

I think I know what you're looking for, but just to clarify:

1. Is this to be on one page, or spread out over multiple pages?

For example, would you like the user to submit the form in "part 1" and then based on those responses, decide what "part 2" will look like? Or, would you like something that mimics this logic (http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm) -- each option yields other options.

The latter would only work if the choices can be predetermined (i.e. there are no user inputted choices). So, if you're trying to test against a text field, it would be best to spread across many pages. In theory, you could use some client-side validation (read: javascript) to do this on one page, but that might be limited by your setup.

2. Do you have PHP available on your server?

3. This information is to be emailed, correct? Are you saving it to a database as well?

[Twilightrose917]

1. It's only going to be one page. All the other pages are information and display type stuff...

Something like that example might work, but there needs to be a couple areas where they can enter their own information... I don't know if I can get that script to work in combination or not...

2. I'm not sure...

3. Yes - after a client finishes the form and hits 'submit', it should go to my email. About the database... I wasn't planning on it, but I think that would be a good idea. Would that be included with the email function or would I have to set up something special for it?

[Medyman]

1. It's only going to be one page. All the other pages are information and display type stuff...

Something like that example might work, but there needs to be a couple areas where they can enter their own information... I don't know if I can get that script to work in combination or not...

Ok. That script itself won't work for your needs. And altering it will probably be a difficult route to take. There are easier ways to show/hide content. This (http://www.visualbinary.net/files/tutorials/choose-your-destination/) is an example that I made for someone that shows such a technique.


I'm not sure...
You'll need to figure that out. Because it can't be done otherwise. You can run the phpinfo() test (http://www.htmlgoodies.com/beyond/php/article.php/3472431) to check. If you're on a windows server, you could use ASP and MSSQL (in which case I won't be able to help, because I know nothing about those languages).


Yes - after a client finishes the form and hits 'submit', it should go to my email. About the database... I wasn't planning on it, but I think that would be a good idea. Would that be included with the email function or would I have to set up something special for it?
Well, you would need to write special code for it. You'll also need to set up the database. But it can all be done at the same time, if that's what you mean.

Run the PHP test and confirm that it's available, and then I"ll walk you through it.

[Twilightrose917]

Thank you! I'll check that and then get back to you.

[Twilightrose917]

okay, I installed WAMP on my USB drive... I can use it both at home and at school that way. I started working on part of the form... here's what I've got so far:


<h1><p align="center"><font color="FF0000">To Order:</font></p></h1>
<form id="form1" name="form1" method="post" action="">
Order Form:
<br><br><form id="form2" name="customer information" method="post">
<label>Contact Information:</label>
<br />
<p>Name: <br />
<textarea name="customer name" id="customer name" cols="45" rows="2"
maxlength="30" onkeyup="return ismaxlength(this)"></textarea><br /><br />
Email Address:<br />
<textarea name="customer email" id="customer email" cols="45" rows="2"
maxlength="50" onkeyup="return ismaxlength(this)"></textarea><br /><br />
Mailing Address: (optional)<br />
<textarea name="Mailing Address" id="Mailing Address" cols="45" rows="5"></textarea>
</p>
</form>
<form id="form3" name="Product orders" method="post">
<label>Product Ordering</label>
<p>Select Servie/ Product(s) you wish to order:<br />
<label>
<input type="checkbox" name="Logo Design" id="Product" />
Logo Design
</label>
<label>
<input type="checkbox" name="Business Card" id="Product"/>
Business card design
</label>
<label>
<input type="checkbox" name="Web Graphic" id="Product"/>
Web Graphic (forum use)</label> <label>
<input type="checkbox" name="Fliers/Handouts" id="Product"/>
Fliers/ Handouts
</label> <label>
<input type="checkbox" name="Notecards" id="Product"/>
Note Cards </label><label>
<input type="checkbox" name="other" id="Product"/>
Other </label></form>

I didn't think I need to put any special code in the Customer information part, so that's why I started on it. I also put in the checkboxes for the different products. Is it possible with php to make it so that when someone checks one or more of the boxes, the specifications they need to fill out for each product will come up under the boxes? If not, I can change whatever I need to to make it work better...

[Medyman]

Great!

After looking at your form, I'm assuming that the input-specific parts stem from the services -- click web graphics would show web-graphics pertinent questions. Hopefully that assumption is correct.

To do this, we can utilize a script like this:

<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>

What this says is, if an element with a specified id is visible (display="block") set it invisible (display="none"). If it's visible, set it to invisible. We'll be calling this script every time one of the checkboxes is clicked. So the checkbox becomes a on/off toggle to show/hide certain parts of the form.

How do we call this when you click in the checkbox? With the onClick event.

<input type="checkbox" value="id of div you want to show/hide" onClick="toggle_visibility(this.value)">

Does that make sense? Let me know if you have any questions thus far. If not, I'll move on to the PHP bit.

I was a bit confused by the HTML you posted above. You have several forms on the page. Why is that? Are you just trying to separate/organize the form or is there some sort of specific functionality you're trying to achieve. You can only submit one form at a time, so multiple form elements won't work in this instance.

I took the liberty of cleaning up your HTML, replacing the deprecated elements (<font>, <align>) and adding some CSS styling. Your page so far should look like this (or similar):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Order Form</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">

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
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: 150px;
}

.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>

<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="mailingaddress">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="other" class="threepxfix" onClick="toggle_visibility(this.value)" /> Other <br />
</p>

<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
</p>
<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
</p>
<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
</p>
<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
</p>
<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
</p>
<p id="other" class="hidden">
<label for="services">Other:</label>
</p>

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

</form>



</body>
</html>

CSS courtesy of Dynamic Drive style library (http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/).

[Twilightrose917]

Your assumption was correct on that, yes. And with the forms - you were right in your first guess - I was trying to give it a little organization within the form itself, but I didn't know that wouldn't work. Thanks for cleaning up my code - it looks much better now. :)

okay - I put that code in, and I understood all that well enough... now my question is: Where do I put the text (questions pertaining to each service) that I want to appear when the checkbox is clicked?

Nevermind - I figured it out. THANK YOU SO MUCH!!!

and... after I finish putting in the specifications for all the service items, is there anything else I need to do for that part or can we start working on the database thing? (and the email thing too, I suppose........)

Thanks again for all the help! :)

[Medyman]

Where do I put the text (questions pertaining to each service) that I want to appear when the checkbox is clicked?


<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
<!-- Logo Design specific goes here -->
</p>
<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
<!-- Business Card specific goes here -->
</p>
<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
<!-- Web Graphics specific goes here -->
</p>
<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
<!-- Flyer specific goes here -->
</p>
<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
<!-- Notecards specific goes here -->
</p>
<p id="other" class="hidden">
<label for="services">Other:</label>
<!-- Other specific goes here -->
</p>

[Twilightrose917]

or at least i thought i had it figured out... I was messing around with it before I saw your message, and I kind of got it to work. Or at least I got things to show up, just not how I thought they would. Then I saw your post, and put the bracket thing
<!-- specific info goes here --> in the script and started messing with it. But nothing ever showed up when I checked the box other than what you put in there. What am I doing wrong? :confused: (majorly confused)

[Medyman]

Can you post what you have so far?

[Twilightrose917]

yeah give me a minute. ... do you want just the part i'm working on, or the whole thing?

um... I got something to appear how I wanted it to, but now I don't know how to do the textbox to come after it...

[Medyman]

It might be easier for you to work if you change


.hidden {
display:none;
}

to


.hidden {
display:block;
}

You'll need to change it back once youre done. But this way you don't need to click each checkbox everytime to test.

[Twilightrose917]

oh thanks - that is easier. here's the 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: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
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: 150px;
}

.hidden {
display:block;
}

/*.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="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> <textbox id="companyname"></textbox>

</p>
<p id="business_card" class="hidden">
<label for="services">Business Card Design:</label>
</p>
<p id="web_graphics" class="hidden">
<label for="services">Web Graphics:</label>
</p>
<p id="flyers" class="hidden">
<label for="services">Flyers/Handouts:</label>
</p>
<p id="notecards" class="hidden">
<label for="services">Notecards:</label>
</p>
<p id="other" class="hidden">
<label for="services">Other:</label>
</p>

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

<br>

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

i wasn't sure if you needed all of it or just what i was working on, but the part i'm working on is:


<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
<br>Company Name: <br> <textbox id="companyname"></textbox>


so far I haven't had a lot of success getting the textbox to show. Do I need to do that in CSS or something?

[thetestingsite]

change textbox to textarea.

Hope this helps.

[Twilightrose917]

I suppose that might be a good thing to script correctly... thanks - it did work.

[Twilightrose917]

okay - now that I've got that figured out, this is what i have so far:


<p id="logo_design" class="hidden">
<label for="services">Logo Design:</label>
<br>Company Name: <br> <textarea id="companyname"></textarea>
<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>Company Name:<br><textarea id="companyname"></textarea>
<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>

how do I make the textareas smaller and/or wider? And is it possible to make it so that
"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." streches across the whole page instead of being in the column like that? I tried to do a couple things with it but instead ended up messing up the alignment for the textareas following it...

[thetestingsite]

how do I make the textareas smaller and/or wider?

Edit the following in your css:



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

[Medyman]

how do I make the textareas smaller and/or wider?
Use cols and rows as well as make the changes to CSS that thetestingsite mentions above.
http://www.w3schools.com/TAGS/tag_textarea.asp



And is it possible to make it so that

"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."

streches across the whole page instead of being in the column like that? I tried to do a couple things with it but instead ended up messing up the alignment for the textareas following it...
.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}


Also, instead of <textarea> you should be using <input type="text"> for a great number of those fields. The textarea should only be used when you have multiple lines of text you need to have inputted. Something like someone's name or company affilliation can be fit into a text box.
http://www.w3schools.com/TAGS/tag_input.asp

[Twilightrose917]

thanks you two. I've almost got everything done for the individual services, but I want to put in a dropdown list under a couple things... how do I do that?

[thetestingsite]

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



<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]

it does, thank you. (again)

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

[Twilightrose917]

... 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:


<!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]

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]

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]

Never mind - I just figured it out. I didn't put in
class="threepxfix" to the input tag...

[Jas]

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

<script language=JavaScript>
Has been depreciated by the W3C. You should use:

<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 :rolleyes:

[Twilightrose917]

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


<!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. :D

[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:

<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).


<?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:

$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:

<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:


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:

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:


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

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:


/* 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:

<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:

<input type="text" />
Notice the backslash before the closing bracket.

[Twilightrose917]

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:

<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).


<?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:

<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:

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:


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:

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:


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

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:


/* 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:

<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:

<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. :)

[Medyman]

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...
Yes, you need to have one for each of the checkboxes.

For a second checkbox, you'll add something like this:

if (isset($_POST['services2'])) {
$variable1 = $_POST['field_name_1'];
$variable2 = $_POST['field_name_2'];
}

If there are common elements in all of the forms, then you can just add them outside the if statements -- just like name, mailing address, email etc...


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?
No, not if you understand the relationship these have to the PHP script.


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)
It's just to test it. In the final script, you'll be emailing and saving to a database. Until that's set up, this gives you a visual cue that everything is working. It's best to get everything outputting correctly and then add the email part (otherwise, you get 1000 emails for nothing).

By the way, not sure if you realize this or not, the email won't be functional until you get a proper server. WAMP isn't a mail server.


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.

Give this (http://www.alistapart.com/stories/doctype/) a read. It'll probably do a better job of explaining it than I could. My point though was that you're using a XHTML declaration at the top of your document. This says to the browser that you're using XHTML, which you're not. You should be using a HTML DTD, as listed on the article I linked to. Also, XHTML isn't fully supported by IE as yet.


Build out the rest of your PHP script with the if statements, and post what you have. We'll go from there.

[Twilightrose917]

It's just to test it. In the final script, you'll be emailing and saving to a database. Until that's set up, this gives you a visual cue that everything is working. It's best to get everything outputting correctly and then add the email part (otherwise, you get 1000 emails for nothing).

By the way, not sure if you realize this or not, the email won't be functional until you get a proper server. WAMP isn't a mail server.

Build out the rest of your PHP script with the if statements, and post what you have. We'll go from there.

oh okay... um... will I need to fill out the code for it to do the test or does it do it on its own?

And yes, I did know that - about needed a real server for the email function to work. :)

I think I'm done with the php 'if' statements, but I'm not sure if I did the drop-down menus correctly...

here's the php script:

<?php

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

if (isset($_POST['services_logo']))
{
$company_name = $_POST['comanyname'];
$company_description = $_POST['companydescription'];
}

if (isset($_POST['services_businesscard']))
{
$variable1 = $_POST['company_name'];
$variable2 = $_POST['companycontact'];
}

if (isset($_POST['services_webgraphic']))
{
$variable1 = $_POST['forumname'];
$variable2 = $_POST['sig/avatar_description'];
}

if (isset($_POST['services_flyer']))
{
$variable1 = $_POST['whatevent'];
$variable2 = $_POST['whatfor'];
$variable3 = $_POST['whofor'];
$variable4 = $_POST['otherinfo'];
}

if (isset($_POST['services_notecard']))
{
$variable1 = $_POST['selectedartwork'];
$variable2 = $_POST['y/n'];
}

if (isset($_POST['services_buyartwork']))
{
$variable1 = $_POST['artworkname'];
}

if (isset($_POST['services_other']))
{
$variable1 = $_POST['otherservice'];
$variable2 = $_POST['description'];
}


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

?>


and here's the script of the checkboxes and all the textboxes and stuff that go with them:

<p>
<label for="services">Services:</label>
<input type="checkbox" name="services_logo" value="logo_design" onClick="toggle_visibility(this.value)" /> Logo Design<br />
<input type="checkbox" name="services_businesscard" value="business_card" class="threepxfix" onClick="toggle_visibility(this.value)" /> Business Card Design <br />
<input type="checkbox" name="services_webgraphic" value="web_graphics" class="threepxfix" onClick="toggle_visibility(this.value)" /> Web Graphics <br />
<input type="checkbox" name="services_flyer" value="flyers" class="threepxfix" onClick="toggle_visibility(this.value)" /> Flyers/Handouts <br />
<input type="checkbox" name="services_notecard" value="notecards" class="threepxfix" onClick="toggle_visibility(this.value)" /> Notecards <br />
<input type="checkbox" name="services_buyartwork" value="Buying_Artwork" class="threepxfix"
onClick="toggle_visibility(this.value)" /> Artwork for Sale<br />
<input type="checkbox" name="services_other" 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" name="companyname" /><br>
<br>Business Description: <br><textarea name="companydescription"></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" name="company_name" /><br>
<br>Company Contact:<br><textarea name="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" name="forumname" /><br>
<br>Please either describe a basic outline of what you want, or give us something to base the image off of:<br><textarea name="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" name="whatevent" />
<br>What is it for?<br><input type="text" name="whatfor" />
<br>Who is it for?<br><input type="text" name="whofor" />
<br>Give any other needed information:
<br>(date, time, location, etc...)<br><textarea name="otherinfo"></textarea>
</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 name="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 name="artworkname"></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 name="description"></textarea>
</p>

if you need anything else from either script, let me know and I'll post it........

[Medyman]

oh okay... um... will I need to fill out the code for it to do the test or does it do it on its own?

No, you have specify what you want to echo out.

Change testing part to this:

/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $company_name . "<br>";
echo $company_description . "<br>";
echo $variable1 . "<br>";
echo $variable2 . "<br>";
echo $variable3 . "<br>";
echo $variable4 . "<br>";

A few other things you need to change before we can move on:

1. Don't use "/" in the filed names. Use underscores, instead
2. Use unique variable names. If someone is interested in two services, you won't get all the results because the repetitive variables will overwrite the first.

To test use the echo statements, using the same syntax as above. You'll need to create a new line for each variable. Fill out the ENTIRE form (all services), hit submit and make sure that all the files are outputting correctly. If you're not getting some fields to work, post your PHP and HTML, and we'll go from there.

[Twilightrose917]

A few other things you need to change before we can move on:

1. Don't use "/" in the filed names. Use underscores, instead
2. Use unique variable names. If someone is interested in two services, you won't get all the results because the repetitive variables will overwrite the first.


um.... I fixed the 2nd one, but I'm confused about the first... can you explain that a little bit more? Like... where do you see that I used "/" where I shouldn't have?

[Medyman]

um.... I fixed the 2nd one, but I'm confused about the first... can you explain that a little bit more? Like... where do you see that I used "/" where I shouldn't have?


<?php

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

if (isset($_POST['services_logo']))
{
$company_name = $_POST['comanyname'];
$company_description = $_POST['companydescription'];
}

if (isset($_POST['services_businesscard']))
{
$variable1 = $_POST['company_name'];
$variable2 = $_POST['companycontact'];
}

if (isset($_POST['services_webgraphic']))
{
$variable1 = $_POST['forumname'];
$variable2 = $_POST['sig/avatar_description'];
}

if (isset($_POST['services_flyer']))
{
$variable1 = $_POST['whatevent'];
$variable2 = $_POST['whatfor'];
$variable3 = $_POST['whofor'];
$variable4 = $_POST['otherinfo'];
}

if (isset($_POST['services_notecard']))
{
$variable1 = $_POST['selectedartwork'];
$variable2 = $_POST['y/n'];
}

if (isset($_POST['services_buyartwork']))
{
$variable1 = $_POST['artworkname'];
}

if (isset($_POST['services_other']))
{
$variable1 = $_POST['otherservice'];
$variable2 = $_POST['description'];
}


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

?>

The highlighted above and the cooresponding HTML field names

[Twilightrose917]

thanks - I totally skipped over those when I was looking at it. But I tried it out in WAMP, and either I'm not using it (wamp) correctly or I messed up somewhere in the code. Only 'email address' and 'mailing address' work... :mad:

here's the php:


<?php

$name = $_POST['name'];

$email = $_POST['emailaddress'];

$address = $_POST['mailingaddress'];

if (isset($_POST['services_logo']))

{

$company_name = $_POST['comanyname'];

$company_description =

$_POST['companydescription'];

}

if (isset($_POST['services_businesscard']))

{

$variable1 = $_POST['bcardcompanyname'];

$variable2 = $_POST['companycontact'];

}

if (isset($_POST['services_webgraphic']))

{

$variable1 = $_POST['forumname'];

$variable2 =

$_POST['sig_avatar_description'];

}

if (isset($_POST['services_flyer']))

{
$variable1 = $_POST['whatevent'];
$variable2 = $_POST['whatfor'];
$variable3 = $_POST['whofor'];

$variable4 = $_POST['otherinfo'];

}

if (isset($_POST['services_notecard']))

{
$variable1 = $_POST['selectedartwork'];

$variable2 = $_POST['y_n'];

}


if (isset($_POST['services_buyartwork']))

{
$variable1 = $_POST['artworkname'];

}


if (isset($_POST['services_other']))

{
$variable1 = $_POST['otherservice'];

$variable2 = $_POST['description'];

}


/* TESTING OUTPUT */
echo $name . "<br>";
echo $email . "<br>";
echo $address . "<br>";
echo $companyname . "<br>";
echo $companydescription . "<br>";
echo $bcardcompanyname . "<br>";
echo $companycontact . "<br>";
echo $forumname . "<br>";
echo $sig_avatar_description . "<br>";
echo $whatevent . "<br>";
echo $whatfor . "<br>";
echo $whofor . "<br>";
echo $otherinfo . "<br>";
echo $selectedartwork . "<br>";
echo $y_n . "<br>";
echo $artworkname . "<br>";
echo $otherservice . "<br>";
echo $description . "<br>";


and here's the html (for the whole page):


<!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>

<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>
<h1><p align="center"><font color="FF0000">Order Form</font></p></h1>
<br>

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

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

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

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


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

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

class="threepxfix" onClick="toggle_visibility(this.value)" /> Business Card Design

<br />
<input type="checkbox" name="services_webgraphic" value="web_graphics"

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

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

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

class="threepxfix"
onClick="toggle_visibility(this.value)" /> Artwork for Sale<br />
<input type="checkbox" name="services_other" 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" name="companyname" /><br>
<br>Business Description: <br><textarea name="companydescription"></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" name="bcardcompanyname" /><br>
<br>Company Contact:<br><textarea name="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" name="forumname" /><br>
<br>Please either describe a basic outline of what you want, or give us something to

base the image off of:<br><textarea name="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" name="whatevent" />
<br>What is it for?<br><input type="text" name="whatfor" />
<br>Who is it for?<br><input type="text" name="whofor" />
<br>Give any other needed information:
<br>(date, time, location, etc...)<br><textarea name="otherinfo"></textarea>
</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 name="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 name="artworkname"></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 name="description"></textarea>
</p>

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

<br>

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


I don't think I quite know what I'm doing with WAMP... :( :mad: :(

[Medyman]

The fact that you're getting the two variables to work out correctly suggests that you have WAMP set up correctly.

Your "name" field isn't working because in your HTML you have this:

<input type="text" name="user" value="" />
and in your PHP, you have this:

$name = $_POST['name'];

They need to be the same. So change both to 'name' or 'user'. And that field will work :D


Company Name & Description aren't working because of the following:

There is a typo: $company_name = $_POST['companyname'];

Also, the variables in the echo statements are missing the underscores in the title.


The rest are working, just not outputting correctly. You changed the variables names at the end of the script (in the echo section), you also need to change them within the if statements.

[Medyman]

Try this PHP script on for size, I've added some more detailed echos that might make it easier to troubleshoot for you. Some of the variable names are changed, so be sure to replace your entire order.php with this.


<?php
error_reporting(E_ALL);
$name = $_POST['user'];
$email = $_POST['emailaddress'];
$address = $_POST['mailingaddress'];

if (isset($_POST['services_logo'])) {
$company_name = $_POST['companyname'];
$company_description = $_POST['companydescription'];
}

if (isset($_POST['services_businesscard'])) {
$bcard_company_name = $_POST['bcardcompanyname'];
$company_contact = $_POST['companycontact'];
}

if (isset($_POST['services_webgraphic'])) {
$forum_name = $_POST['forumname'];
$sig_avatar_description = $_POST['sig_avatar_description'];
}

if (isset($_POST['services_flyer'])) {
$what_event = $_POST['whatevent'];
$what_for = $_POST['whatfor'];
$who_for = $_POST['whofor'];
$other_info = $_POST['otherinfo'];
}

if (isset($_POST['services_notecard'])) {
$artwork = $_POST['selectedartwork'];
$buy = $_POST['y_n'];
}


if (isset($_POST['services_buyartwork'])) {
$artwork_name = $_POST['artworkname'];
}


if (isset($_POST['services_other'])) {
$other_service = $_POST['otherservice'];
$other_service_description = $_POST['description'];
}


/* TESTING OUTPUT */
echo "Name:" . $name . "<br>";
echo "Email:" . $email . "<br>";
echo "Address:" . $address . "<br>";
echo "Company Name:" . $company_name . "<br>";
echo "Company Description:" . $company_description . "<br>";
echo "Company Name for Business Card:" . $bcard_company_name . "<br>";
echo "Company Contact:" . $company_contact . "<br>";
echo "Forum Name:" . $forum_name . "<br>";
echo "Sig/Avatar Description:" . $sig_avatar_description . "<br>";
echo "What is the event?:" . $what_event . "<br>";
echo "What is it for?:" . $what_for . "<br>";
echo "Who is it for?:" . $who_for . "<br>";
echo "Other event information:" . $other_info . "<br>";
echo "Notecards: Artwork to be included:" . $artwork . "<br>";
echo "Buy artwork with notecards?" . $buy . "<br>";
echo "Selected artwork:" . $artwork_name . "<br>";
echo "What do you need?:" . $other_service . "<br>";
echo "Please describe:" . $other_service_description . "<br>";

If you understand all of this, you can go on to emailing/saving to database (assuming it works as you want it).

[Twilightrose917]

you are amazing, you know that? :D Thank you so much!

I replaced what I had with this, and it works - as long as I filled in every text box. I tried only doing one of the services, and it gave me a bunch of "notice: undefined variable" with the name and line location of each text box when I submitted it...

oh, and um... will I need to change anything in the html to correspond to the php file?

[Medyman]

I replaced what I had with this, and it works - as long as I filled in every text box. I tried only doing one of the services, and it gave me a bunch of "notice: undefined variable" with the name and line location of each text box when I submitted it...


Yeah, that's because of this: error_reporting(E_ALL);. It reports all errors (no matter how inconsequential). I've added it for debugging purposes. You should remove it before you publish. The errors basically mean that the field on the HTML page were blank...which they were. It's not a critical error by any means (if you return to the default error reporting state, it won't show anything).


oh, and um... will I need to change anything in the html to correspond to the php file?
If everything works and you're comfortable with the formatting, nope! The way that the output is showing up (minus the errors and empty fields) is how the results will be emailed to you, so make sure you're happy with that.

Next step: database. Think about what information you want to save, and how you want the database to be set up.

[Twilightrose917]

okay... I know what I want to do as far as database information, but I'm not sure about the setup. Could I use an Excel spreadsheet for that?

And for the php results - I'm mostly happy with them, except that now when I hit 'submit' with only one or two services filled out, all the textarea field names show up.

Example: I just filled in a letter of the alphabet for name/email/address and the textarea fields for the flier/brochure service, and this is what I got:



Name:a
Email:b
Address:c
Company Name:
Company Description:
Company Name for Business Card:
Company Contact:
Forum Name:
Sig_Avatar_Description:
What is the event?:d
What is it for?:e
Who is it for?:f
Other event information:g
Notecards: Artwork to be included:
Buy artwork with notecards?
Selected artwork:
What do you need?:
Please describe:


I just want the filled-out fields to show up. Is this happening because of the 'testing output' part? What I mean is - when I set up the site and take out the testing output code, will all that still show?

also - how do i put space in-between the field names? :confused:

[Medyman]

okay... I know what I want to do as far as database information, but I'm not sure about the setup. Could I use an Excel spreadsheet for that?
To organize the architecture of the database? Sure... A mySQL DB is basically a spreadsheet anyway. If you know how you would set it up in Excel, it'll be easy to convert that into a SQL structure.


I just want the filled-out fields to show up. Is this happening because of the 'testing output' part?

Yes. The page that you're seeing now won't show up in the final version. It's just a test page to make sure everything works. Do you want that information to show to your visitors (i.e. like a confirmation page?). It can be tweaked to only show the info that is entered but I didn't find that important to just test it.


how do i put space in-between the field names?
Which field names are you talking about?

[Twilightrose917]

To organize the architecture of the database? Sure... A mySQL DB is basically a spreadsheet anyway. If you know how you would set it up in Excel, it'll be easy to convert that into a SQL structure.


awesome. Do you want to see the spreadsheet when I finish with it? And if so - how do I show it to you?



Yes. The page that you're seeing now won't show up in the final version. It's just a test page to make sure everything works. Do you want that information to show to your visitors (i.e. like a confirmation page?).

that's good... and yes, I would like to have a confirmation page of sorts. Maybe just something like a page that says "Order Confirmed", and lists what they ordered, and then has a link for them to go back to the home page if they want to... that won't be too hard to do, will it?



Which field names are you talking about?

for the results page - the stuff I posted before. How do I space out the results so they are easier to read?

[Medyman]

awesome. Do you want to see the spreadsheet when I finish with it? And if so - how do I show it to you?


Upload it to the web and then post it here. Mediafire (http://www.mediafire.com) is a good host.


for the results page - the stuff I posted before. How do I space out the results so they are easier to read?
Why don't we hold off on this until we actually build the result page. Currently it's only in a state suitable for testing.

[newgurl]

Hi I am learning from this coding you are doing as it is similar to what I am needing to give a quote. Can I include a running total with this?
Also I tried the order.php and it gives lots of errors. Would it be because I haven't placed any if empty before the isset to echo?
Thanks slowly learning