?
Solved

Howto print out fieldnames and form data with javascript.

Posted on 2005-02-28
11
Medium Priority
?
4,470 Views
Last Modified: 2011-09-20
Hello - thanks for reading my question.

I have created a web page with a form on it that the user can complete and submit to me.

It has about 30 fields in it.

My question is simple: I want a button on the page that allows the user to print out the fields and form values they filled in (for their reference).

I cant beleive no website offers this function, I have searched the web with copernic but cant find a web page that offers this facililty.

Any help appreciated!

Trixy
0
Comment
Question by:trix1210
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 2

Expert Comment

by:almes
ID: 13420978
Most of the sites won't give an option to print the form directly, they would allow the printing of the summary of the repot.
But, if you insist on doing this, you can call the window.print() method in order to print the page.
You can also use a special css file in order to hide some fields that you don't want the user to print from your site.

Good luck.
0
 

Author Comment

by:trix1210
ID: 13421148
ok, thanks almes. I dont think that the window.print() function will print out what the user has typed in though!

I'd like to copy the user input to a new blank popup window then give the option to print out the new window with fieldnames and values too.
0
 
LVL 2

Expert Comment

by:almes
ID: 13422065
First, I tried to print out a form in my browser (IE 6) and it printed also the user input. Second, I still think that after the submit, give the user the approval in a new page (the form action page) which will contain a lovely thank you message with the user input which he could print.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 3

Expert Comment

by:hackman_3vilGuy
ID: 13422659
Heres something I am working on. Need to go to Parent Teachers Night at school. gota go but anyway.

<SCRIPT LANGUAGE="JavaScript">
function doTheFunkyChickenDance()
{
var strong = new Array(document.forms[0].length);
strong[0] = "Form element A";
strong[1] = "Form element B";
var ttext = "";
for(i=0; i<document.forms[0].length;i++)
{
ttext += strong[i] + ": " + document.forms[0][i].value + "<BR />";
}
die.innerHTML = ttext;
}
</SCRIPT>

<BODY BGCOLOR="#FFFFFF">
<FORM NAME="theFormOfDoom">
A<INPUT TYPE="text" NAME="theText" VALUE="hello"><BR />
B<INPUT TYPE="text" NAME="theText" VALUE="hello">
</FORM>
<INPUT TYPE="BUTTON" VALUE="hi" onClick="doTheFunkyChickenDance()" />

<DIV id="die">
</DIV>

</BODY>
0
 
LVL 3

Expert Comment

by:hackman_3vilGuy
ID: 13424400
Explanation....

In the form you have all the textboxes. You give each textbox/field a title by
*
strong[?] = "WHAT YOU WANT TO CALL THE FIELD";
*
Then it looks through and prints into the <DIV> the value. You can then print out the page with window.print();
Sample output:
*
Name: hackman_3vilGuy
IQ: 4
Strange: True
*
:)
0
 

Author Comment

by:trix1210
ID: 13439903
ok, heres what ive done so far:

http://www.sja.org.uk/london/stpancras/bookform7.htm

Fill in some values with random text..

if you click the print icon at the bottom of the form, it opens a new window with the form layout displayed, but no values are filled in!

Also, I dont want the submit form and print buttons displayed on when this new window opens.

Ill try your script above too.

thanks

trixy
0
 
LVL 3

Expert Comment

by:hackman_3vilGuy
ID: 13442314
I've fixed it a little bit and redone some of it so you can remove the last thing I made. It now can ignore hidden and submit <INPUT>s and put it into a window. Sorry it didnt work before.
All you need to do is put the rest of the form elements in. Just put:
*
strong[THE_NEXT_NUMBER] = "The text to display";
*
Then add
*
<INPUT TYPE="BUTTON" VALUE="Preview My Response" onClick="hackman_3vilGuy()" />
*

THE SCRIPT:

<SCRIPT LANGUAGE="JavaScript">
function hackman_3vilGuy()
{
//Script made by hackman_3vilGuy
var strong = new Array(document.forms["eventbook"].length);
strong[0] = "Company Name";
strong[1] = "Organisers Name";
strong[2] = "Company Address";
strong[3] = "Post Code";
strong[4] = "Daytime Tel";
strong[5] = "Evening Tel";
strong[6] = "Email Address";
strong[7] = "Location";
strong[8] = "Directions to Site";
strong[9] = "Where shall we park our ambulances or mobile vehicles?";
strong[10] = "St. John Vehicles Parking Arrangements - Include location/directions."
strong[11] = "Type Of Event";
strong[12] = "Public Present";
//Continue this list strong[*]="?";

var ttext = "<H1 STYLE=\"color: blue;\">Form Preview</H1><TABLE>";//For this put whatever title you want for the new window
var j =0;
for(i=0; i<document.forms["eventbook"].length;i++)
{
      if(document.forms["eventbook"][i].type=="hidden" || document.forms["eventbook"][i].type=="submit")
      {
            j--;
      }
      else
      {
            ttext += "<TR><TD width=200><B>";
            ttext += strong[j] + ":</B></TD><TD>" + document.forms["eventbook"][i].value + "<BR />";
            ttext+= "</TD></TR>";
      }
      j++;
}
ttext += "</TABLE>";
theWin = window.open("","theWin");
theWin.document.write(ttext);
}
</SCRIPT>

THE BUTTON:

<INPUT TYPE="BUTTON" VALUE="Preview My Response" onClick="hackman_3vilGuy()" />
0
 

Author Comment

by:trix1210
ID: 13443326
Thats excellent hackman - thanks so much!

The final nag is the following lines:

ttext +="</TABLE><a href="whatever.htm" onClick="window.print();return false"><img src="images/las_print.gif"></a>";
theWin = window.open("","theWin");
theWin.document.write(ttext);


I cant get my las_print.gif to display at the bottom of the opened window so the user can print the page by clicking on the gif image.

I've amended your lines above to include the window.print() function, but now the new window wont open and the las_print.gif is not displayed.

nearly there...

Ill credit you on the page on my site mate.

Trixy
0
 
LVL 3

Accepted Solution

by:
hackman_3vilGuy earned 500 total points
ID: 13444230
the problem is your quotes. You must escape them with \ so that JavaSCript knows where your string ends.

ttext +="</TABLE><a href=\"whatever.htm\" onClick=\"window.print();return false\"><img src=\"images/las_print.gif\"></a>";

:)
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 15634438
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: hackman_3vilGuy

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk

EE Cleanup Volunteer
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question