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: 4474
  • Last Modified:

Howto print out fieldnames and form data with javascript.

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
trix1210
Asked:
trix1210
  • 4
  • 3
  • 2
  • +1
1 Solution
 
almesCommented:
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
 
trix1210Author Commented:
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
 
almesCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
hackman_3vilGuyCommented:
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
 
hackman_3vilGuyCommented:
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
 
trix1210Author Commented:
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
 
hackman_3vilGuyCommented:
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
 
trix1210Author Commented:
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
 
hackman_3vilGuyCommented:
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
 
Cem TürkSenior Software EngineerCommented:
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

Independent Software Vendors: 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!

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now