Ronnel.D Ronnel.D - 1 month ago 6
PHP Question

How can I print only the division that i want on html?

Hi guys I want that on the print section only the this division will be shown,
what would be the script to this? And by the way this is a modal of every tenant on a table. This print will serve as a receipt of every tenant.

<div class="modal-body">
<form class="form-horizontal" enctype = "multipart/form-data">
<div class="form-group">
<strong>
<div>
<h3 class="modal-title text-center" id="myModalLabel">
<strong>Republic of the Philippines<br>Province of Negros Occidental</strong></h3>
<h4 class ="text-center"><em>City of Victorias</em></h4>
<h4 class="text-center">
<strong>OFFICE OF THE MARKET SUPERVISOR</strong>
</h4>

<br>
<div class="form-group">
<input type = "hidden" class="form-control" name= "id" placeholder="First Name" value = "<?php echo $value['rate_id'];?>">
<label class="col-sm-2 control-label">Name </label>: <?php echo $value['tenant_fname']." ".$value['tenant_mname']." ".$value['tenant_lname'];?>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Location </label>: Stall No. <?php echo $value['stall_number']." (".$value['stall_floor'];?>)
</div>
<div class="form-group">
<label class="col-sm-2 control-label">SUBJECT </label> :
FOR PAYMENT OF ELECTRICAL CONSUMPTION FOR THE &nbsp;&nbsp;&nbsp;PERIOD FROM
<input class = "datepick custom-input1"></input>
,TO
<input class = "datepick custom-input1"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">METER NO. </label>: <input type="text" name="" class = "custom-input"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ELECTRIC RATE </label>: <input class = "custom-input" value="<?php echo $value['elec_rate']?> per kWh" id= "rate" readonly ></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">PRESENT </label>: <input class = "custom-input" id="current" name="current"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">PREVIOUS </label>: <input class = "custom-input" value ="<?php echo $value['charges']?> kWh" id = "previous" readonly> </input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">TOTAL CONSUMPTION</label>:
<input type="text" class = "custom-input" type="" id="result1" readonly>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">AMOUNT </label>:
<input type="text" class = "custom-input" type="" id="result" readonly>
</div><br>
</strong>
</div>
</div>

Answer

If I am not wrong, then the code below will do what you want. For more information, refer to the MDN documentation about @media.

@media print {
    body * { 
        visibility: hidden; 
    }
    .modal-body* { 
        visibility: visible; 
    }
    .modal-body{ 
        display: block!important; 
        position: absolute; 
        top: 40px; 
        left: 30px; 
    }
}