Home/ Questions/Q 8973045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:21:39+00:00

I am using the following print plugin: Ask Ben Print Plugin The plugin works

  • 0

I am using the following print plugin: Ask Ben Print Plugin

The plugin works pretty great for anything on the page except input fields contents. I need to be able to print out a page containing input field contents, which for some reason input fields do not appear on the print preview/ final printed document, when using this plugin. When I simply use the Ctrl+P method to print out a page containing input fields, the contents of the input fields are shown fine.

I was wondering if someone can help me pinpoint what it is about the code below that is preventing me from being able to print out input field contents? many thanks in advance!

JQuery function call:

$(".main-container").print();

Javascript: 

// Create a jquery plugin that prints the given element.
jQuery.fn.print = function() {
    // NOTE: We are trimming the jQuery collection down to the
    // first element in the collection.
    if (this.size() > 1) {
        this.eq(0).print();
        return;
    } else if (!this.size()) {
        return;
    }

    // ASSERT: At this point, we know that the current jQuery
    // collection (as defined by THIS), contains only one
    // printable element.
    // Create a random name for the print frame.
    var strFrameName = ("printer-" + (new Date()).getTime());

    // Create an iFrame with the new name.
    var jFrame = $("<iframe name='" + strFrameName + "'>");

    // Hide the frame (sort of) and attach to the body.
    jFrame.css("width", "1px").css("height", "1px").css("position", "absolute").css("left", "-9999px").appendTo($("body:first"));

    // Get a FRAMES reference to the new frame.
    var objFrame = window.frames[strFrameName];

    // Get a reference to the DOM in the new frame.
    var objDoc = objFrame.document;

    // Grab all the style tags and copy to the new
    // document so that we capture look and feel of
    // the current document.
    // Create a temp document DIV to hold the style tags.
    // This is the only way I could find to get the style
    // tags into IE.
    var jStyleDiv = $("<div>").append(
    $("style").clone());

    // Write the HTML for the document. In this, we will
    // write out the HTML of the current element.
    objDoc.open();
    objDoc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    objDoc.write("<html>");
    objDoc.write("<body>");
    objDoc.write("<head>");
    objDoc.write("<title>");
    objDoc.write(document.title);
    objDoc.write("</title>");
    objDoc.write(jStyleDiv.html());
    objDoc.write("</head>");
    objDoc.write(this.html());
    objDoc.write("</body>");
    objDoc.write("</html>");
    objDoc.close();

    // Print the document.
    objFrame.focus();
    objFrame.print();

    // Have the frame remove itself in about a minute so that
    // we don't build up too many of these frames.
    setTimeout(

    function() {
        jFrame.remove();
    }, (60 * 1000));
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The plugin uses $(this).html(); to determine what gets sent into the printing iFrame. You’ll need to specify values as well to get an input’s text to print if you are selecting the inputs specifically. When I ran a test, I was able to print the contents of the input field if I wrapped the input in a <div> and told the plugin to print the containing div instead. EDIT: I set the value="" of the <input>, which registered as HTML to the plugin instead of adding text and then initiating the print function.

    Here’s a jsFiddle: http://jsfiddle.net/radiatorsounds/D5tef/

    To clarify, you’ll need to set the value="" of each input (which counts as HTML) to its val() (which does not) in order for the parentDiv.html() to grab it properly. I’ve updated the fiddle with this code, which will need to run right before the print(); command is run.

    $('#printTheDivLink').click(function() {
    $('div input').each(function() {
        $(this).attr('value', $(this).val());
    });
    $('#divToPrint').print();
});​
    • 0