CODEWITHSUNDEEP
jqueryprinting
mr_reamer
mr_reamer

Reputation: 115

Capturing the values of form elements for printing

I'm fairly competent at using JQuery, and can usually get most things to work with a bit of messing around. I tried googling this problem but either I'm searching the wrong terms, or there's no published solution.

When preparing the print.css file for an order form page, I was asked if I could remove the text INPUTS and just print out their values, likewise a SELECT menu containing an address.

When researching I did come across the .val() method - now known as .fieldValue() - and the .serializeArray() so I think I know how I could extract the value, just not how to print it in place of the form element.

Just to be clear:
The SELECT menu for instance, shows the first line of the default delivery address. For the printout, I'd like it to actually display the whole address, across several lines, and no SELECT menu.

I have this solution below working, which allows me to capture the values, but I don't know how to insert them in place of the form elements: Printing an HTML form using jQuery

Thanks for any help!

EDIT The captured values should only be inserted in the printout, not replace the form elements in the html.

Upvotes: 3

Views: 1723

Answers (1)

Anders Arpi
Anders Arpi

Reputation: 8397

Here is a basic solution as a jsfiddle: http://jsfiddle.net/2mBSS/15/

Basically: when something happens (like a button is clicked), loop over the corresponding elements and use the .replaceWith() jQuery function to replace them with their value... which you get with .val(). As you can see this works fine with <select> as well as <input> elements.

You can of course create a more complex HTML element to replace the inputs with, eg "<p>" + val + "</p>".

Note that this will completely remove the form input fields until the page is reloaded. This might not matter at all (if you for example open the print page in a new tab) or it might break the design of your site... Personally I prefer to use a print CSS sheet to style the printed pages, for example removing the border on input boxes. But this might not work well if you need to extract the value of a selected option in a <select> element.

If you want to keep the page intact, I would recommend that you embed some hidden elements to hold the text for printing, and copy the input forms' values to them when clicking the print button... then in your print CSS you hide all inputs and instead display the backing elements (for example <p> or <span>).

Upvotes: 1

Related Questions