I want to print only the specific div content and email results from HTML/JS page?

Question

I tried to use print JS/HTML page but it is printing whole page. I just want to print a specific div content, in my case it is result.

The code is as follows:

function displayRadioValue() {

  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '}
    document.getElementById("control").style.display = "block";
    document.getElementById("toemail").href += document.getElementById("final-results").innerText;

  }

@media print {

  #result,
  #result * {
    visibility: visible;
  }
  #result {
    position: absolute;
    left: 0;
    top: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

<p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
      Submit
     </button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
      email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

The problem I had in this question was resolved by removing

  body * {
    visibility: hidden;
  }

https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — Unbywyd, Aug 25 '20 at 09:43
Does this answer your question? [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — BadPiggie, Aug 25 '20 at 09:59
Do you still need help with this ? Or this is all sorted @jugal ? — Always Helping, Aug 25 '20 at 12:03
@jugal yes i want help using the solution i am getting error "TypeError: document.getElementById(...) is null "@Alwayshelping — jugal, Aug 25 '20 at 13:38
@jugal Do you want to print the results table in the print format - Correct ? — Always Helping, Aug 26 '20 at 00:41

Always Helping · Accepted Answer · 2020-08-26T04:51:11.230

You need to use actual div .final-results in the CSS / @media print{} to show the results tables only in the window.print() command when you click on Print to PDF

Also, you can add the custom CSS to your PDF as your wish to

Edit: I have added querySelector method to add the innerText of your .final-results div in to href of so you can use that for emailing as well by clicking send to Email

Live Demo:

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
    document.getElementById("control").style.display = "block";
    document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
  }
}

function genTable(ques, total, section) {
  var result = "<b>Section " + section + ":</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
  result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
  return result
}

@media print {
  body * {
    visibility: hidden;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

<p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
  Submit
</button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to
    email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

Showing error "TypeError: document.getElementById(...) is null" — jugal, Aug 26 '20 at 04:40
@jugal Copy my exact code the JS and HTML and CSS. Let me know. — Always Helping, Aug 26 '20 at 04:42
@jugal I have edited my answer above - Check now. No errors. — Always Helping, Aug 26 '20 at 04:47
I ran the code snippet given by you and it showing error.... also in my code i already change to final-result and it still coping full page in pdf ..... i also try to put my html code in body and hide the body part and put visiblity for final-result still no change — jugal, Aug 26 '20 at 04:47

I want to print only the specific div content and email results from HTML/JS page?

1 Answers1

Linked