Print what's in input fields

Question

I got a simple page filled with inputs and I need them to be printed with the content typed by user.

So far I can print the input fields but always empty inside.

class VM{

PrintDiv() {
        let self = this;
        var printContents = document.getElementById('print').innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;
        window.print();
        location.reload();
    }
  }  
    
    ko.applyBindings(new VM);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="print">some text<input /></div>     
    <br />
    <button data-bind="click: PrintDiv">Print</button>

Found the way to do it with this css. Organized and clean. https://stackoverflow.com/a/2001530/8049362 — Pedro Pam, Jun 26 '17 at 13:50

Oen44 · Accepted Answer · 2017-06-26T15:51:10.657

0

Well, you want to get text from input field but you are getting HTML from entire div with id print. Here is simple fix.

class VM {

  PrintDiv() {
    let input = <HTMLInputElement> document.getElementById('print');
    let printContents = input.value;
    document.getElementById('content').innerText = printContents;
    location.reload();
  }
  
}

ko.applyBindings(new VM);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>some text<input id="print" /></div>
<br />
<button data-bind="click: PrintDiv">Print</button>

<div id="content"></div>

edited Jun 26 '17 at 15:51

answered Jun 26 '17 at 10:09

Oen44

3,156
1
22
31

Already tried but .value is not working, don't know if is not recognized by typescript (.ts) – Pedro Pam Jun 26 '17 at 10:14
Your code snippet is giving error, I tried to adapt the code to mine but still doesn't let me use **.value** – Pedro Pam Jun 26 '17 at 10:38
Of course it's giving error, that's typescript, can't be run in browser just like that. Check it now. – Oen44 Jun 26 '17 at 10:56
Feeling closer, but at the moment is printing **undefined** – Pedro Pam Jun 26 '17 at 11:06
yes is just that one posted. If i change the id to inside the input i can get the value of it, but i loose the rest. Would be recommendable do instead multiple prints to get the result? the idea is having alot of input fields in the page so i was looking for something more global. Thanks for your time – Pedro Pam Jun 26 '17 at 11:18
Read knockout tutorial then, you can find lots of useful examples. Follow them and you will get what you need. You won't learn much by coping and pasting code. – Oen44 Jun 26 '17 at 11:29
True, but already saw this question without giving answer, not related to knockout. I feel is just a problem of syntax of typescript that I'm not finding to solve the printing. – Pedro Pam Jun 26 '17 at 11:33
That code is working, tried running it and no error etc. – Oen44 Jun 26 '17 at 12:16
Maybe i didn't explain myself properly, as i said in a previous comment I can retrieve the value inside of the input this way, but i loose the rest of the info. I need a printed page that contain all the information plus the inserted text fields visible. At the moment the code is only giving the text inserted, if change the print area to the **div** I can't see the inserted text getting a **undefined*. I really appreciate all the help you given so far. Thank you. – Pedro Pam Jun 26 '17 at 13:31
Make new div element with id `content` and change that div content to input value. See example, made edit. – Oen44 Jun 26 '17 at 15:52

Print what's in input fields

1 Answers1