Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 307
  • Last Modified:

HTML form variables and Printing

I am having a little difficulty in deciding which is the best way to go to solve the following problem - this is the scenario:

"I want a user to enter information on a form, on page1.html.  Page1.html will also include a button to print the form (as well as a reset button).  Page2.html contains the layout for printing, and requires the data from page1.html to be added to it.  I do not really want the user to access page2.html but to just see a print preview of this.  If it is not what they want I want them to be able to go back to page1.html to amend the data."  

The data being passed from page1.html to page2.html is not being saved to any sort of recordset.  I do not really want to go down the asp route if need be as want to keep to HTML and Javascript where possible.

I understand the different methods of Post and Get but have got myself a little confused reading up on the subject.  I would welcome some pointers for the best way to finding a solution for this.

Many thanks in advance.
0
ITgirl
Asked:
ITgirl
  • 6
  • 6
  • 2
1 Solution
 
COBOLdinosaurCommented:
What is the layout of page 2 look like and where is the data suppsoed to go in it?

Cd&
0
 
ITgirlAuthor Commented:
Page 2 will contain the information entered in page 1.  The data being entered into <td> elements.  Page2 will also include a logo.

Hope this helps.
0
 
GrandSchtroumpfCommented:
It's better to use the POST method, otherwise you get very messy urls, but then you need to use some server side script (ASP, PHP or other).
If you want javascript only, then you need to use the GET method.

page1.html can post the data to page2.html.
page2.html echoes the data as it needs to be printed and also echoes the data in hidden input fields.  If the user wants to go back to editing, page2.html can then POST the data back to page1.html and page1.html can fill the corresponding form fields accordingly.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GrandSchtroumpfCommented:
I recommend the POST + server-side solution, it's much easier to maintain and it's much more solid.
Another solution is to save the data in a cookie... that's probably better than using the GET method.
0
 
COBOLdinosaurCommented:
If they click the print icon of their browser while on page 1, there is nothing you can do; it is going to print using the form.

For you own control, you can avoid using server side with a frameset, where you only show one frame at a time:
<html>
<head>
   <title> wait message test </title>
</head>
<frameset frameborder=0 framewidth=0 border=0 rows="100%,0">
      <frame src="page1.htm" scrolling="no" name="first">
      <frame src="page2.htm" scrolling="yes" name="second">
</frameset>
</html>

Then in page1 they can click a button and you use scripting to populate the cells of the table in page 2.  Then swap the frames:

<script type="text/javascript">
function transfer()
{
   frm=document.forms[0];
   target=top-frames['second'].document;
   target.getElementById('cell1').innerHTML=frm.field1.value;
   target.getElementById('cell2').innerHTML=frm.field2.value;
   target.getElementById('cell3').innerHTML=frm.field3.value;
//   etc...
      parent.document.body.rows="0,100%";
}
</script>


in page 2 all you need are two buttons:

<input type="button" value="Print" onclick="print()">
<input type="button" value="Make Changes" onclick="parent.document.body.rows='100%,0'">


Cd&

0
 
ITgirlAuthor Commented:
Cd&

I understand what is going on in the above code but am a little confused.  To clarify

The frameset tags contain "holders" for the two pages - page1.htm and page2.htm these are named first and second respectively.

Does the frameset tag need to be on a different page from page1.htm and page2.htm, or can the tag be on the page1.htm?  I am assuming that this is on the same page as page1.htm, and it is this tag which controls which page is being viewed.

The rows="100%,0" statement within the javascript function I assume is the toggle for showing/hiding the page.  Would you please clarify the use of the array "frm=document.forms[0];".

On clicking the button on page 1, (the print button) the function transfer() is activated and is shown in the frameset.  Obviously on each <td> i will need to ensure that there is an id e.g. <td id=cell1> to ensure, using the code above, that the data is populated correctly.

This is again where I get a little confused, are you saying that on page 2 I need to have nothing but the two button, or are you saying that on page2 as well as my layout which includes my data I need to put the two buttons?

Sorry about all these questions/assumptions but I need to get this clear in my head!

Regards
ITgirl

0
 
COBOLdinosaurCommented:
The frameset goes in a seperate file and loads the other page.  Probaly, you should name the frameset as page1.htm and then rename page1.htm to page1a.htm or something so you don't have to change your links to page1.htm.

frm is not an array.  It is just a handle or alias for the form so we don't have to keep repeating document.forms[0] for every reference to the form.

Page2 would have your full layout, but the cell that will receive the data would be empty. The buttons just ned to be added to the layout where ever they are convenient on the page; probably right after the table.

I expect questions to come back on these sorts of setups they can be confusing if you are not used to working with objects in frames.

Cd&
0
 
ITgirlAuthor Commented:
Cd&

I will try this out later on today.

Regards
ITgirl
0
 
ITgirlAuthor Commented:
Cd&

I have had a good try at getting all of this to work, but don't seem to be able to pass the data, although everything else seems to be working.

I have 3 pages, all with the most basic of information on - index.htm, page1.htm and page 2.htm.  The contents of each are:

index.htm

<html>
<head>
   <title>Test to change page</title>
</head>
<frameset frameborder=0 framewidth=0 border=0 rows="100%,0">
      <frame src="page1.htm" scrolling="no" name="first">
      <frame src="page2.htm" scrolling="yes" name="second">
</frameset>
</html>

page1.htm

<html>
<head>
   <title>1st page of test</title>

<script type="text/javascript">
function transfer()
{
   frm=document.forms[0];
   target=top-frames['second'].document;
   target.getElementById('cell1').innerHTML=frm.field1.value;
//   target.getElementById('cell2').innerHTML=frm.field2.value;
//  target.getElementById('cell3').innerHTML=frm.field3.value;
//   etc...
      parent.document.body.rows="0,100%";
}
</script>

</head>
<body>
      <font size="7">Test1</font><p>
      <input type="text" name="field1" size="50" value="ITgirl"></p>
<p>
      &nbsp;<input type="submit" value="Preview Document" name="btnPrint" onclick=transfer()>
</p>
</body>
</html>

page2.htm

<html>
<head>
   <title>2nd page of test</title>

</head>
<body>
      <font size="7">Test2</font>
      
      <table border=1>
            <tr>
                  <td id="cell1">
                  </td>
            </tr>
      </table>
      <input type="button" value="Print" onclick="print()">
      <input type="button" value="Make Changes" onclick="parent.document.body.rows='100%,0'">

</body>
</html>

As I said before if I click on the button on page1, page2 is shown correctly.  If I click on the Print button on page2 that works ok, as does the Make Changes button.  However I have tried a number of different ways to try and display the value in the text box on page1.

Once again, thanks for your help in advance.

Regards
ITgirl
0
 
COBOLdinosaurCommented:
Darn,

A typo.  This: target=top-frames['second'].document;
should be: target=top.frames['second'].document;

Had dash where it should be a dot

Sorry about that.

Cd&
0
 
ITgirlAuthor Commented:
Cd&

Thank you very much for all your help.  Initially I was still unable to view the data on the second page - until I realised that there weren't any form tags around the table and buttons!!!  It now works fine.

One last question to ensure that I can pass the data from page2 back to page1 if I want to make changes how would I change the transfer().  I have tried a few configurations but haven't had much success.  Obviously I would need two functions maybe one called toprintlayout() and one called toverifylayout().

Regards
ITgirl
0
 
COBOLdinosaurCommented:
Change the submit button like this:

<input type="button" value="Preview Document" name="btnPrint" onclick="transfer();return false;>

That should leave the form in its original state when you come back to it so the user can make changes.

If you have to actually submit the form you will then have to add a submit button back in.

Cd&

0
 
ITgirlAuthor Commented:
Cd&

Thankyou so much all working as expected.

ITgirl
0
 
COBOLdinosaurCommented:
Glad we could help. Thanks for the A. :^)

Cd&
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now