-1

I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.

Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?

This is what I have tried

$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.

NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.

Vinod Tigadi
  • 859
  • 5
  • 12
Wasim A.
  • 9,660
  • 22
  • 90
  • 120
  • 1
    Can you reword your question? And show us what you have tried? – amanuel2 Mar 05 '16 at 18:00
  • are you talking about serializing data? – mattdevio Mar 05 '16 at 18:02
  • Very likely, but you can provide 1) the specific code you're using, and 2) what you want to do with that information once you have it? – Cameron Scott Mar 05 '16 at 18:02
  • Sounds like you just want to serialize the form. If you are looking at getting all the inputs from your form, you can do this individually by `$('.class-name').val()`. But yeah, like others are saying, more code is needed to solve your question. – luke Mar 05 '16 at 18:03
  • ok, guys, edited question again for more clearence. – Wasim A. Mar 05 '16 at 18:06
  • Why not just rebuild the form with the values on a printable page and disable all form elements? – mattdevio Mar 05 '16 at 18:06
  • that is long work, there must exist a short way, I am about to complete this just in 3-5 lines of code. – Wasim A. Mar 05 '16 at 18:08

2 Answers2

0

You can use 

$('form').find('input').each(function( key, value ) {
    console.log(value);
});

And to get the data ready for POST or something like it use this

$('form').serialize();
Khaled Al-Ansari
  • 3,910
  • 2
  • 24
  • 27
0

I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.

First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.

I guess, what you are looking is answered in the following SO Questions. Please check out.

  1. Javascript print web form with user input included
  2. How to print only a selected HTML element?

If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.

Community
  • 1
  • 1
Vinod Tigadi
  • 859
  • 5
  • 12
  • Have a look at this jQuery Plugin - http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/ And this blog post about using the plugin - http://www.codediesel.com/browser/printing-selective-dom-elements-on-a-page/ – Vinod Tigadi Mar 05 '16 at 19:28