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:
Code:
<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.
Code:
<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):
Code:
<!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.
Help creating order form
Reply With Quote
(majorly confused)
Bookmarks