...

View Full Version : Form page, submit, show printable page.



buzzkip
05-14-2010, 12:10 PM
Hi all,

I'd like to ask how best to go about to achieve what I want in the picture below.

What I need is a basic html page with a form, and some checkboxes. When I click 'Submit', I need the next webpage to appear with the form information placed in the correct places on this second page.

The second page is a sheet handed to a customer to sign for the delivery of a Mobile Phone, but I'd like this first page and form to be filled in, submitted, and then the printable page will appear with the information all filled into the correct areas.

It can be VERY basic.




Please could someone possibly create a quick example for me maybe?

Or suggest methods to search and read about?



http://i40.tinypic.com/m9x1s0.jpg

Thanks all!

arizvi
05-14-2010, 02:42 PM
Refer this link it may help you.

http://www.htmlgoodies.com/beyond/javascript/article.php/3471111

mbaker
05-14-2010, 05:15 PM
Here is a basic version of your form.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Print Form</title>
<style type="text/css" media="print">
#screen {display:none;}
#print {display:block;}

#print {width:500px;}
img {float:left;}
#pimei, #ppin, #pmodel {float:right; clear:right;}
input {float:right;}
br {clear:both;}
fieldset.extras {width:150px;}
</style>
<style type="text/css" media="screen">
#screen {display:block;}
#print {display:none;}

form {width:300px;}
input {float:right;}
br {clear:right;}
fieldset.extras {width:150px;}
</style>
<script type="text/javascript">
function printForm() {
/* WARNING - no imput validation performed - input assumed to be perfect */
document.getElementById('pname').innerHTML = document.form.name.value;
document.getElementById('pstaff').innerHTML = document.form.staff.value;
document.getElementById('pimei').innerHTML = document.form.imei.value;
document.getElementById('ppin').innerHTML = document.form.pin.value;
document.getElementById('pmodel').innerHTML = document.form.model.value;
document.getElementById('pcable').checked = document.form.cable.checked;
document.getElementById('pbattery').checked = document.form.battery.checked;
document.getElementById('pthecase').checked = document.form.thecase.checked;
/*if ( document.form.cable.checked ) { document.getElementById('pcable').checked = true; }
if ( document.form.battery.checked ) { document.getElementById('pbattery').checked = true; }
if ( document.form.thecase.checked ) { document.getElementById('pthecase').checked = true; } */
window.print();
}
</script>
</head>
<body>
<div id='screen'>
<h1>Print Form</h1>
<form action='javascript:null(); return false;' name='form'>
<fieldset>
<legend>Details</legend>
<label>Name: <input name='name' type='text' size='20'></label><br>
<label>Staff No: <input name='staff' type='text' size='20'></label><br>
<label>IMEI: <input name='imei' type='text' size='20'></label><br>
<label>PIN: <input name='pin' type='text' size='20'></label><br>
<label>Model: <input name='model' type='text' size='20'></label>
</fieldset>
<fieldset class='extras'>
<legend>Extras</legend>
<p>Is this in the order?</p>
<label>Charge cable: <input name='cable' type='checkbox'></label><br>
<label>Additional battery: <input name='battery' type='checkbox'></label><br>
<label>Case: <input name='thecase' type='checkbox'></label>
</fieldset>
<input type="button" value=" Submit "
onclick="printForm(); return false;" >
</form>
</div>
<div id='print'>
<p id='pname'>Name</p>
<p id='pstaff'>Staff</p>
<br>
<img src="pic.png" width="300" height="300" alt="pic">
<p id='pimei'>IMEI</p>
<p id='ppin'>PIN</p>
<p id='pmodel'>Model</p>
<br>
<fieldset class='extras'>
<legend>Extras</legend>
<label>Charge cable: <input id='pcable' type='checkbox'></label><br>
<label>Additional battery: <input id='pbattery' type='checkbox'></label><br>
<label>Case: <input id='pthecase' type='checkbox'></label>
</fieldset>

</div>
</body>
</html>
On clicking submit javascript is used to transferred the information to the print version of the page and the page is printed.

CSS is used to allow two different version of the page (screen and print) in the same html file.

As this is for use in a specific location I assume that you can ensure that javascript will always be enabled.

While this covers the basics, you will probably want to improve the layout (both on screen and for printing).

You may also want to add some input validation.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum