Form geheel afdrukken

Status
Niet open voor verdere reacties.
P

pkuipers

Gebruiker
Lid geworden
8 jul 2014
Berichten
101
webpagina.pngafdrukken.pngHallo, ik ben bezig met het laten uitprinten van een HTML-form. Na via internet te hebben gecontroleerd lukt het mij niet om alle input af te drukken. Dit is wat ik nu heb:
PHP: 
<script type="text/javascript">
  function CopyElem(elem)
  {
      $('form input[type=text]').each(function() {
        $(this).attr('value', $(this).val());
      });

      $('form input[type=date]').each(function() {
        $(this).attr('value', $(this).val());
      });

      $('form input[type=checkbox]').each(function() {
        $(this).attr('checked', $(this).prop("checked"));
      });

  }
  function PrintElem(elem)
  {
      Popup($(elem).html());
  }

  function Popup(data) 
  {
      var mywindow = window.open('', 'myfrm');
      mywindow.document.write('<html><head><title>Behandelformulier</title>'); 
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');

      mywindow.document.close(); // necessary for IE >= 10
      mywindow.focus(); // necessary for IE >= 10

      mywindow.print();
      mywindow.close();

      return true;
  }

Ik heb in het form ook 2
HTML: 
<textarea name="opmerking" rows="5"></textarea>
staan en de inhoud hiervan wordt niet afgedrukt. (zie voorbeelden bovenaan.)
Heeft iemand hier een oplossing voor?

Groetjes, Peter
 
Laatst bewerkt:
Heb je een voorbeeld die we kunnen bekijken / uittesten?
Als je het formulier ook opslaat, dan kan je natuurlijk geen twee velden met de name opmerkingen gebruiken.
 
Ik kan dit niet reproduceren. Hier wordt alles goed getoond.
Ik zie wel dat je de labels van algemene opmerkingen niet correct hebt gepositioneerd.
Die zou er links naast horen, als je het netjes wilt doen.
 
Aar zei:
Ik kan dit niet reproduceren. Hier wordt alles goed getoond.
Ik zie wel dat je de labels van algemene opmerkingen niet correct hebt gepositioneerd.
Die zou er links naast horen, als je het netjes wilt doen.
Klik om te vergroten...

Hallo Aar,

ik vind het vreemd dat in de script wel de "input type="text", type input="date" en type input="checkbox"" genoemd worden maar niet het type input="textarea"?
HTML: 
<script type="text/javascript">
  function CopyElem(elem)
  {
      $('form input[type=text]').each(function() {
        $(this).attr('value', $(this).val());
      });

      $('form input[type=date]').each(function() {
        $(this).attr('value', $(this).val());
      });

      $('form input[type=checkbox]').each(function() {
        $(this).attr('checked', $(this).prop("checked"));
      });

  }
 
Ik vermoed een bug in je browser?
 
Zoiets kan het zijn, je zal het zelf moeten fine-tunen ;)
Code: 
<form>
<input type="text">
<br><input type="date">
<br><input type="checkbox">
<br><textarea name="opmerking" rows="5"></textarea>
<br><button type="button" onclick="PrintElem(this)">Print</button>
</form>

Code: 
function CopyElem(elem) {
    $('form input[type=text]').each(function() {
        $(this).attr('value', $(this).val());
    });
    $('form input[type=date]').each(function() {
        $(this).attr('value', $(this).val());
    });
    $('form input[type=checkbox]').each(function() {
        $(this).attr('checked', $(this).prop("checked"));
    });
    $('form textarea').each(function() {
        $(this).text($(this).val());
    });
}
function PrintElem(elem) {
    CopyElem(elem.parentNode);
    Popup( $('form').html() );
}

Haha, die 2 regels voor IE kan je er uithalen, dat is prehistorie
 
Net even in je zip gekeken. Er zitten wat rare dingen in.
Bijv. Bootstrap javascript versie 3.1 met bootstrap css versie 5.2 :confused:
 
bron zei:
Net even in je zip gekeken. Er zitten wat rare dingen in.
Bijv. Bootstrap javascript versie 3.1 met bootstrap css versie 5.2 :confused:
Klik om te vergroten...

Ja, dat kan kloppen. Tijdens het maken van de gehele website heb ik diverse dingen gekopieerd en de ene gebruikte dit en de andere gebruikte dat. Ik durf ook niets weg te halen omdat ik dan bang ben dat ik dan alles moet veranderen.
Ik ben ook nog een leek in websites maken, zoekt alles op internet. Zoals diverse online cursussen via Youtube. Ik denk ook wel eens: "Als het werkt, waarom dan veranderen?" :D
 
Het bovenste stuk tot <style> zou er zo uit kunnen zien
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Behandelformulier</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css">
<link rel="icon" type="img/x-icon" href="img/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<style>


Zelf zet ik alle <script> onderaan (valk boven </body> ) i.v.m. performance maar dat is hier geen noodzaak.
 
Laatst bewerkt:
bron zei:
Het bovenste stuk tot <style> zou er zo uit kunnen zien
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Behandelformulier</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css">
<link rel="icon" type="img/x-icon" href="img/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<style>


Zelf zet ik alle <script> onderaan (valk boven </body> ) i.v.m. performance maar dat is hier geen noodzaak.
Klik om te vergroten...

Thanks, ga het aanpassen en kijken wat het gaat doen.
 
er staat in de index.html ook :

HTML: 
<form action="toebehandelform.php" method="POST" id="myfrm"  style="margin-left: 5vw; width: auto;">

Bij keuze opslaan , maar misschien hier overbodig

toebehandelform.php bestaat niet.

HTML: 
 <script src="bootstrap/js/jquery-1.9.0.min.js"></script>

Pad klopt niet , moet zijn

HTML: 
 <script src="js/jquery-1.9.0.min.js"></script>

Maar is met code van Bron waarschijnlijk opgelost.


Verder lijk ik alles te kunnen afdrukken , wat mis je?
 
Laatst bewerkt:
Frenske123 zei:
er staat in de index.html ook :

HTML: 
<form action="toebehandelform.php" method="POST" id="myfrm"  style="margin-left: 5vw; width: auto;">

Bij keuze opslaan , maar misschien hier overbodig

toebehandelform.php bestaat niet.

HTML: 
 <script src="bootstrap/js/jquery-1.9.0.min.js"></script>

Pad klopt niet , moet zijn

HTML: 
 <script src="js/jquery-1.9.0.min.js"></script>

Maar is met code van Bron waarschijnlijk opgelost.


Verder lijk ik alles te kunnen afdrukken , wat mis je?
Klik om te vergroten...

Hallo Frenske123,

wat betreft de verwijzing naar toebehandelform.php: die bestaat wel in de complete website. De pagina waar wij het nu over hebben is een onderdeel van de website.
Verder verschillende aanpassingen gemaakt naar aanleiding van Bron en jouw aanbevelingen.
Mijn dank hiervoor.

Groetjes, Peter
 
Is het nu opgelost, Peter?
 
Ik zie het! Fijn dat het werkt! :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan