I am printing a div in a javascript and i was putting a css within it, why it doesn't follow my css? anything i put in my css was something nothing or it doesn't have an effect to arrange my print section. Can anyone teach me how to arrange the printing page in a javascript code with css to arrange my print?.
how do i apply my css in this situation,
Here is my code:
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div>
<!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div>
<!-- col-md-4 -->
</div>
<!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label> was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label> with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for <label id="cert_physician"></label> days barring complication.</p>
</div>
</div>
<!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div>
<!-- signatory -->
</div>
<!-- printme -->
why does it not makes my header-cert centered in printing? it didn't follow the css that i've put.
I think you missed . in header-cert, so use .header-cert.
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style rel="text/stylesheet">' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
//newWin = window.open("");
newWin = window;
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
document.getElementById('printBtn').addEventListener('click', function(){
printDiv();
})
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader">Cerheader title</p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
<button id="printBtn">Print<button>
Related
I'm just learning Javascript, and this is my first attempt to make something for myself, so forgive me if the solution is very simple. I'm trying to automate score keeping for a card game. When I click the submit button, nothing happens.
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne">
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber">
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="golf.js"></script>
And the javascript:
var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;
function tallyScore() {
round += 1;
document.getElementById(round).innerHTML = "Round: " + round;
scoreShayne += document.getElementById("inputShayne").value;
scoreAmber += document.getElementById("inputAmber").value;
document.getElementById(shayne).innerHTML = scoreShayne;
document.getElementById(amber).innerHTML = scoreAmber;
}
some recommandations in this code, just to see ;)
// global values
var round = 0
, scoreShayne = 0
, scoreAmber = 0
;
// use constants to prevent the JS interpreter from recalculating each call
const hmi_round = document.getElementById('round')
, hmi_shayne = document.getElementById('shayne')
, hmi_amber = document.getElementById('amber')
, hmi_inputShayne = document.getElementById('inputShayne')
, hmi_inputAmber = document.getElementById('inputAmber')
;
function tallyScore()
{
hmi_round.textContent = "Round: " + ++round; // ++round is a direct increment (different from round++ )
hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
hmi_amber.textContent = scoreAmber += hmi_inputAmber.valueAsNumber; // instead of parseInt(hmi_inputAmber.value)
hmi_inputShayne.value = "0"; // reset values for the next round
hmi_inputAmber.value = "0";
}
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne" type="number"min="0" value="0"> <!-- don't forget to set the type -->
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber" type="number" min="0" value="0"> <!-- don't forget to set the type -->
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
Does anyone know why my if statement doesn't do anything when running at the end of my program? I'm wanting to replace null returns with no office and I can't seem to run it afterwards.
for (z = 0; z < items.length; z++) {
var team = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].TeamName + '</p></div><div class="col-sm-4 office"><p style="margin-bottom: 0px;">' + items[z].Office + '</p></div></div>';
var single = '<div class="row"><div class="col-sm-8"><p style="margin-bottom: 0px;">' + items[z].Title + '</p></div><div class="col-sm-4"><p class="office" style="margin-bottom: 0px;">' + items[z].Office +
'</p></div></div>';
if (items[z].Office == 'null') {
$(".office").append('No office');
}
}
<div class="row" style="padding-bottom: 10px;">
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Single Users</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsSingles" style="padding-left:0px; border-right: solid 1px #DCE1E5;">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<div class="row title">
<div class="col-md-8">
<span>Teams</span>
</div>
<div class="col-md-4" style="padding-left: 4px;">
<span>Office</span>
</div>
</div>
<div class="col-md-12 teamsTeams" style="padding-left:0px;">
</div>
</div>
</div>
</div>
Remove the quotes from around null (and add another = to check for type, so === instead of ==)
I have a modal with some data on it and I need to print it exactly like it is on the modal. I have some JavaScript to print the div where the content is but the problem is the bootstrap classes don't get recognized during the print and so the entire layout changes.
function printDiv() {
var winPrint = window.open();
/*var header = '#include("report/header")';*/
/*var body = '#include("memberpayment/monthlybill")';*/
var body = document.getElementById('printarea').innerHTML;
winPrint.document.write(body);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
my modal:
my print view:
From searching online it seems I need to include the bootstrap library before I write the print content (source)
This did not work for me as when I write a file before it gives a blank 2 pages on my print view. I've tried using the jQuery plugin printThis
4: https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html which also did not work out.
in this questionit seems adding a media="print" to the link seemed to work aswell but it didn't work for me.
This is my Modal code:
<div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
<!-- ----------------------top heading part---------------------- -->
<div class="row" style="border: 1px solid black;">
<div class="col-md-4 center">
#if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) && CNF_LOGO !='')
<img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/>
#else
<img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/>
#endif
</div>
<div class="col-md-8 center arial" style="font-weight: bold;">
<p style="padding-top: 1rem;">
Royal Bombay Yacht Club
</p>
<p>
C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.
</p>
<p>
Fax : +91-22-2202 1014 Email: rbycmail#vsnl.net & billing#rbyc.co.in
</p>
</div>
</div>
<!-- ----------------------details and address ---------------------- -->
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p><b>GODREJ ADI BURJOR ESQ., [G0014 ]</b></p>
<br>
<p>
OFFICE - GODREJ INDUSTRIES LIMITED,
PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;">
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Membership No: <b>G0014</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Bill Dated: <b>21/08/2018</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">BillRef : <b>G0014-8</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Due Date: <b>15/10/2018</b></div>
</div>
</div>
<br>
<!-- ----------------------from/to date ---------------------- -->
<div class="row centerWhenSmall">
<div class="col-md-3 col-sm-12">From: <b>01-Aug-2018</b></div>
<div class="col-md-3 col-sm-12">To: <b>31-Aug-2018</b></div>
</div>
<!-- ----------------------table top part---------------------- -->
<div class="row tablePadding">
<table class="customTable">
<tr>
<th>Narration</th>
<th class="center">Dr.</th>
<th class="center">Cr.</th>
</tr>
</table>
</div>
<!-- ----------------------table mid part---------------------- -->
<div class="row tablePadding2">
<table class="customTable2">
<tr>
<th>BNo:32775 on 21/08/18 - DINING ROOM</th>
<th class="borderBottom center">1,082.00 </th>
<th class="borderBottom center"></th>
</tr>
</table>
</div>
<!-- ----------------------table body---------------------- -->
<div class="row tablePadding3">
<table class="customTable3">
{{--<tr>--}}
{{--<th class="center">Monthly Total : </th>--}}
{{--<th class="center">1,082.00</th>--}}
{{--<th class="center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Previous Outstanding : </th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Amount Due/Credit Balance : </th>--}}
{{--<th class="borderBottom center">1,082.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
</table>
</div>
<br>
<!-- ----------------------disclaimer---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
<div class="col-md-12 col-sm-12">
Bill Dated : 21/08/2018
</div>
<div class="col-md-12 col-sm-12 borderBottom">
<b>To be cleared by : 15/October/2018</b>
</div>
</div>
<!-- ----------------------notice---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12" style="margin-bottom: 3%;">
IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
</div>
<div class="col-md-12" style="text-decoration: underline;">
Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
</div>
<div class="col-md-12">
PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES # 2% ON OUTSTANDING AMOUNT
</div>
<div class="col-md-12">
<b style="font-weight: 900">REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
accounts#rbyc.co.in and billing#rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT</b>
</div>
<div class="col-md-12">
Beneficiary : Royal Bombay Yacht Club
</div>
</div>
<!-- ----------------------bank details---------------------- -->
<div class="row">
<div class="col-md-6">
<b style="font-weight: 800">HDFC BANK</b><br>
REGAL CINEMA BUILDING,<br>
SHAHID BHAGATSINGH ROAD,<br>
MUMBAI - 400 039<br>
Current Account No : <b>00852530000017</b><br>
SWIFT NO: <b>HDFCINBB</b> [ OVERSEAS TRANSFER ]*<br>
IFSC NO: <b>HDFC0000085</b> [ IN INDIA TRANSFER ] *
</div>
<div class="col-md-6">
<b style="font-weight: 800">YES BANK LTD.</b><br>
Mittal Chambers, Nariman Point,<br>
MUMBAI - 400 021<br>
Savings Account No : <b>000494600000162</b><br>
SWIFT NO : <b>YESBINBB</b> [ OVERSEAS TRANSFER]*<br>
IFSC NO : <b>YESB0000004</b> [ IN INDIA TRANSFER ]*
</div>
</div>
<!-- ----------------------notice 2---------------------- -->
<div class="row">
<div class="col-md-12" style="font-weight: 900">
MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
</div>
</div>
<!-- ----------------------vat tin pan gst---------------------- -->
<div class="row">
<div class="col-md-9" style="font-size: 1.3rem; width: 70%;">
<div class="col-md-4">VAT TIN : 27720003820V</div>
<div class="col-md-4">PAN : AAAAR0071R</div>
<div class="col-md-4">GST : 27AAAAR0071R1Z7</div>
</div>
<div class="col-md-6"></div>
</div>
<!-- ----------------------bottom paragraph---------------------- -->
<div class="row">
<div class="col-md-12">
I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
effected by us in the regular course of our business.
</div>
</div>
<!-- ----------------------disclaimer 2---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
</div>
<!-- ----------------------bottom---------------------- -->
<div class="row" style="margin-top: 20%;">
<div class="col-md-12 center">
--------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
</div>
<div class="col-md-12 center">
I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
</div>
</div>
<!-- ----------------------print---------------------- -->
</div>
<div class="row" style="margin-bottom: 5%; ">
<div class="col-md-5"></div>
<div class="col-md-3">
<button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"><i
class="fa fa-print"></i> Print
</button>
<!-- <button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill">
<i class="fa fa-print"></i> Print
</button> -->
<button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill">PAY
</button>
</div>
<div class="col-md-4"></div>
</div>
When creating Html for printing, kindly note that the element css floating doesn't work very well in cross browser for HTML printing.
so, to quick fix your issue, kindly add below css inside the modal HTML (at the beginning) -
<style>
/* this stylesheet is used when generating a PDF */
/* define a page */
#page {
size: auto; /* OR 6.5in 8.5in; A4 */
margin-top: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm;
}
#media print {
[class*="col-md-"] {
float: none;
display:table-cell;
}
[class*="col-lg-"] {
float: none;
display:table-cell;
}
}
</style>
Additionally, in your html there is scope to do the refinements to make it more compatible for printing.
I hope this may help you.
I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.
$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
Let me start by saying I'm a total beginner at JavaScript/jQuery. I've just started learning it because I want to use some JavaScript features for my website.
What I want to achieve is the following when you click on the edit button:
Before:
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
' . $item['productnaam'] . '</h4>
<p class="group inner beschrijving list-group-item-text">
' . $item['productbeschrijving'] . ' <br> Allergieen: '. $item ['allergieen'].'</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
€ ' . $item['productprijs'] . ' </p>
</div>
<div class="col-xs-6 col-md-6" >
'.$status.'
</div>
<div class="col-xs-6 col-md-6">
<input type="button" href="#" name="'.$item['productnaam'].'" value = "Voeg toe"></a>
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
After:
<body>
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '
<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<input type ="text" value="' . $item['productplaatje'] . '">
<div class="caption">
<h4 class="group inner list-group-item-heading">
<input type ="text" value = "' . $item['productnaam'] . '">
</h4>
<p class="group inner beschrijving list-group-item-text">
<input type ="text" value="'. $item['productbeschrijving'] . '">
</p>
<p>
<input type ="text" value = "Allergieen: '. $item ['allergieen'].'">
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
<input type = "text" value="€' . $item['productprijs'] . ' "
</p>
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</body>
I've looked at different scripts on how to replace divs with input, but every time it just doesn't work when I test it myself or it isn't exactly what I wanted.
Edit: will add code in a few min
You can just change the divs contentEditable="true" , then style them they they look like inputs. Then remove contentEditable altogether to accept changes.