Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Form page, submit, show printable page.

    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?





    Thanks all!

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    20
    Thanks
    0
    Thanked 1 Time in 1 Post

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Here is a basic version of your form.

    Code:
    <!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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •