Form to printable HTML/PDF — Client Side?

@twlackMay 25.2007

I have a application form that asks for Credit Card info on a non secure server. I want to submit all the normal form data to my server while keeping the CC data on the clients machine. After submission client would get an HTML (PDF?) page, with the Credit Card data, to print and snail mail.

If thats not possible I’d at least like to present the client with a pretty form to print without sending any form data from client machine.

I am not a Java programmer I’d need a basic copy/paste script to edit. Or at least a very good start, I have some experience with altering scripts.

Thanks,
Tim

to post a comment

JavaScript

6 Comments(s) _↴

@Typhoon101May 25.2007 — #Given the fact you are non Java[B]Script [/B](not Java) programmer, i think the easiest way would be to design your HTML form so it can be printed directly. No PDF. Then, when the form is submitted, automatically print the page, wipe the credit card details and send you the rest via your normal method.

e.g. Note in the address of the resulting page (i have just used google), the credit card information is empty.

[code=html]<html>
 <!-- Created on: 25/05/2007 -->
 <head>
 <script type="text/javascript">
 function printAndSend(frm){
 window.print();
 alert("Click 'OK' on the print dialogue box. The form will then submit having   wiped your credit card details.")
 frm.creditCardNumber.value="";
 frm.action="http://www.google.com";
 frm.submit();
 }
 </script>
 </head>
 <body>
 <form action="" method="get" id="myForm" onSubmit="printAndSend(this); return false">
 <input type="text" name="field1" value="field 1" /><br>
 <input type="text" name="field2" value="field 2" /><br>
 <input type="text" name="field3" value="field 3" /><br>
 <input type="text" name="field4" value="field 4" /><br>
 <input type="text" name="field5" value="field 5" /><br>
 <input type="text" name="creditCardNumber" value="0000 0000 0000 0000" /><br>
 <input type="submit" value="submit" />
 </form>
 </body>
 </html>[/code]

NOTE: it is important to leave the action field of the form empty, then set it in JavaScript. this is because if you have JavaScript disabled, the form will just submit to your server, sending you the credit card details.

It is not pretty, but works

@twlackauthorMay 25.2007 — #That works well, thanks.

But my goal was to "format" the printable page WITH the CC info while sending the rest sans CC data. I have a "textarea" which may be quite large or not depending on the client. I want to format that text BEFORE printing.

I am now thinking (trying your script flicked on the light) that I may request all but CC info, submit the form, format it on a response page with an area to add CC info and then let the client print that response page without submitting it again. The submit button on the response page would call the print dialog box.

Thanks again

@Typhoon101May 25.2007 — #That would work also.

If you were prepared to get your hands just that little more dirty, you could create a PDF form, then have a server side script populate it with whatever your users entered in your HTML form. That way you could format it however you liked before hand, and being a PDF, everyone would see the same, without cross browser issues.

Here is a good walk through for PHP. [URL]http://koivi.com/fill-pdf-form-fields/[/URL] There are also many good tutorials for ASP as well.

@twlackauthorMay 25.2007 — #That would work also.

If you were prepared to get your hands just that little more dirty, you could create a PDF form, then have a server side script populate it with whatever your users entered in your HTML form. That way you could format it however you liked before hand, and being a PDF, everyone would see the same, without cross browser issues.

Here is a good walk through for PHP. [URL]http://koivi.com/fill-pdf-form-fields/[/URL] There are also many good tutorials for ASP as well.[/QUOTE]

I may get that dirty some day when I have the time. But I'm using Lasso for my server side script: http://reference.lassosoft.com/Reference.LassoApp? It has the PDF capabilities and I've toyed with them some but I'm not familiiar enough to tackle this, yet.

@slaughtersMay 25.2007 — #That would work also.

If you were prepared to get your hands just that little more dirty, you could create a PDF form...[/QUOTE]This will not be a terribly helpful comment - but I just want to go on record as saying that requiring a user to download an 27.5 MB pluggin (Adobe Acrobat Reader) to view the output of a form is not a great idea.

If you know your customers and they are primarily businesses who already have Acrobat Reader installed (or have high speed connections), then it's a non-issue.

I've just never gotten over Adobes absurdity in creating a 27+ MB pluggin (1 hour and 9 minute download on a 56kb modem).

@twlackauthorMay 26.2007 — #This will not be a terribly helpful comment - but I just want to go on record as saying that requiring a user to download an 27.5 MB pluggin (Adobe Acrobat Reader) to view the output of a form is not a great idea.

If you know your customers and they are primarily businesses who already have Acrobat Reader installed (or have high speed connections), then it's a non-issue.

I've just never gotten over Adobes absurdity in creating a 27+ MB pluggin (1 hour and 9 minute download on a 56kb modem).[/QUOTE]

Yes, you're right.

But I only have 1 or 2 customers that are still using dial up. Most have realized how well spent their money is online including a high speed connection for their employees. And most of my customers are businesses looking for business customers. They need to look big, professional and pretty.

I do remember the days, many years ago, when a lot of my thought went into keeping file sizes (including plugins) down so as not to antagonize viewers. Going way back, I remember working with a film print house once a month, sending a 20-30 MB PhotoShop file from my 28Kb modem to theirs. I would start it after hours and check it every hour for 6-8 hours. DSL was not yet invented and we didn't even have cable TV to our town!

Yes, I guess I'm getting kind of old. lol

Also in #JavaScript _↴

Javascript Window Scrolling javascript quiz on the same page from validaton in javascript

Success!

Help @twlack spread the word by sharing this article on Twitter...

Tweet This

Form to printable HTML/PDF — Client Side?

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Form to printable HTML/PDF — Client Side?

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴