Insert Custom HTML Content To Checkbox Containers Of Items 'checked'
Basically; what I am trying to achieve is 'if and only if' an element in my static HTML form is checked; so if a checkbox is checked > then the user hits the 'submit' button. Th
Solution 1:
Hope it helps. Just included all these lines:
texts = {
item1: 'Some <strong>html</strong> gfor item1',
item2: 'Some <strong>html</strong> gfor item2',
item3: 'Some <strong>html</strong> gfor item3',
item4: 'Some <strong>html</strong> gfor item4',
}
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
So create a hash texts that will include copy per each container ID, as shown. Not the most beautiful version ever, but a fast response
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<style>
#item1 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item2 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item3 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item4 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
.space {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px 4px 4px 4px;
}
</style>
<body>
<div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
<br/>
<div class="row" id="item1" class="box">
Item 1 Details for the PDF test.
<br>
<input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
<br />
</div>
<div class="space"></div>
<div class="row" id="item2" class="box">
Item 2 Details for the PDF test.
<br>
<input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
<br />
</div>
<div class="space"></div>
<div class="row" id="item3" class="box">
Item 3 Details for the PDF test.
<br>
<input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
<br />
</div>
<div class="space"></div>
<div class="row" id="item4" class="box">
Item 4 Details for the PDF test.
<br>
<input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
<br />
</div>
<div class="space"></div>
<center>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
</p>
</div>
</div>
</div>
</center>
<div id="print" style="background-color:#fff"></div>
<script type="text/javascript">
texts = {
item1: 'Some <strong>html</strong> gfor item1',
item2: 'Some <strong>html</strong> gfor item2',
item3: 'Some <strong>html</strong> gfor item3',
item4: 'Some <strong>html</strong> gfor item4',
}
$("#container").css('background', '#fff')
$('.download-pdf').click(function() {
notChecked = $("input[type=checkbox]:not(:checked)").parent();
notChecked.hide();
yesChecked = $("input[type=checkbox]:checked").parent();
$.each(yesChecked, function( index, el ) {
$(el).show().html(texts[$(el).attr('id')]);
});
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} else if (typeof pdf !== 'undefined') {
(function() {
pdf.save(file + '.pdf');
// $("#item4").hide();
}, 2000);
} else {
alert('Error 0xE001BADF');
}
});
</script>
</body>
</html>Solution 2:
Here's another version, where you just specify your HTML inside divs with after-submit class:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<style>
#item1 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item2 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item3 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
#item4 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px 4px 4px 4px;
box-shadow: 3px 3px 3px #333;
}
.space {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px 4px 4px 4px;
}
.box .after-submit {
display: none;
}
</style>
<body>
<div class="container" id="records" style="background-color:#fff; width: 400px; margin: 0 auto;">
<br/>
<div class="row" id="item1" class="box">
<div class="after-submit">
Some <strong>HTML</strong> here 1
</div>
<div class="before-submit">
Item 1 Details for the PDF test.
<br>
<input type="checkbox" id="check1" name="sample[]" value="red" /> <em>This</em> is a checkbox1
<br />
</div>
</div>
<div class="space"></div>
<div class="row" id="item2" class="box">
<div class="after-submit">
Some <strong>HTML</strong> here 2
</div>
<div class="before-submit">
Item 2 Details for the PDF test.
<br>
<input type="checkbox" id="check2" name="sample[]" value="red" /> <em>This</em> is a checkbox2
<br />
</div>
</div>
<div class="space"></div>
<div class="row" id="item3" class="box">
<div class="after-submit">
Some <strong>HTML</strong> here 3
</div>
<div class="before-submit">
Item 3 Details for the PDF test.
<br>
<input type="checkbox" id="check3" name="sample[]" value="red" /> <em>This</em> is a checkbox3
<br />
</div>
</div>
<div class="space"></div>
<div class="row" id="item4" class="box">
<div class="after-submit">
Some <strong>HTML</strong> here 4
</div>
<div class="before-submit">
Item 4 Details for the PDF test.
<br>
<input type="checkbox" id="check4" name="sample[]" value="red" /> <em>This</em> is a checkbox4
<br />
</div>
</div>
<div class="space"></div>
<center>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a>
</p>
</div>
</div>
</div>
</center>
<div id="print" style="background-color:#fff"></div>
<script type="text/javascript">
$("#container").css('background', '#fff')
$('.download-pdf').click(function() {
yesChecked = $("input[type=checkbox]:checked").closest(".before-submit").hide();
yesChecked = $("input[type=checkbox]:checked").closest(".after-submit").show();
notChecked = $("input[type=checkbox]:not(:checked)").parent().parent();
notChecked.hide();
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} else if (typeof pdf !== 'undefined') {
(function() {
pdf.save(file + '.pdf');
// $("#item4").hide();
}, 2000);
} else {
alert('Error 0xE001BADF');
}
});
</script>
</body>
</html>
Post a Comment for "Insert Custom HTML Content To Checkbox Containers Of Items 'checked'"