HTML Forum

**taskhill** · 11-06-2005, 10:53 AM

Hello all

I am in the process of creatign a quote page for one of my web sites. This new quote page that I am creating is becoming very long and I was wondering how to make it a three part page. I have seen them where you can do page 1 of 3 but don't know how to make sure that all of the information is sent as one versis three different parts to my office. I would really like the form to come in as one email but split the form so my coustomers don't see or feel the real lenght of my form.

Thanks in advance.

**Orodreth** · 11-06-2005, 12:25 PM

Just use invisible fields to store the data on the second and third page.

**taskhill** · 11-06-2005, 07:15 PM

I'm sorry, I'm a hack. How do I do or use invisible fields?

**Orodreth** · 11-07-2005, 12:04 PM

Oh, sorry, the term's not invisible fields but hidden fields.

Anyway, I guess you know how to send the data from one page to another (using method="POST"). Then, on the second page you'll have to print the data from the forms in hidden fields (using php or another server-side scripting language).

Example:
first page:

HTML Code:

<form name="form" action="page2.php" method="POST">
  <input type="text" name="textfield1" size="10" />
  <input type="submit" name="submit" />
</form>

second page:

HTML Code:

<form name="form2"  action="page3.php" method="POST">
  <input type="hidden" name="textfield1" value="<?php echo $_POST['textfield1']; ?>" />
  <input type="text" name="textfield2" size="10" />
  <input type="submit" name="submit" />
</form>

**funkdaddu** · 11-07-2005, 12:34 PM

This assumes they can use PHP on their site, but will work fine, another way to do it is to use a JavaScript button that shows/hides different parts of the form, so it's all on 1 page using 1 form:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
function hideshow(shw,hde) {
	document.getElementById(shw).style.display = "block";
	document.getElementById(hde).style.display = "none";
}
//-->
</script>
		<style type="text/css" media="screen"><!--
.hide {
	display: none
	}

--></style>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="#" method="get" name="FormName">
			<div id="part1">
				<input type="checkbox" name="checkboxName" value="checkboxValue"> Blah
				<p><a href="#" onclick="hideshow('part2','part1'); return false;">Next page ></a></p>
			</div>
			<div id="part2" class="hide"><p>Blerg:</p>
				<p><textarea name="textareaName" rows="4" cols="40"></textarea></p>
				<p><a href="#" onclick="hideshow('part3','part2'); return false;">Next page ></a></p>
			</div>
			<div id="part3" class="hide">
				<p>Blorf:<br>
				<select name="selectName" size="4" multiple>
					<option value="one">first</option>
					<option value="two">second</option>
					<option value="three">third</option>
				</select></p>
			<p><input type="submit" name="submitButtonName"></p>
			</div>
		</form>
		<p></p>
	</body>

</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!