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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script><scriptsrc="js/bootstrap.js"type="text/javascript"></script><linkrel="stylesheet"href="css/bootstrap.css"><linkrel="stylesheet"href="css/bootstrap-theme.css"></head><style>#item1 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item2 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item3 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item4 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
.space {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px4px4px4px;
}
</style><body><divclass="container"id="records"style="background-color:#fff; width: 400px; margin: 0 auto;"><br/><divclass="row"id="item1"class="box">
Item 1 Details for the PDF test.
<br><inputtype="checkbox"id="check1"name="sample[]"value="red" /><em>This</em> is a checkbox1
<br /></div><divclass="space"></div><divclass="row"id="item2"class="box">
Item 2 Details for the PDF test.
<br><inputtype="checkbox"id="check2"name="sample[]"value="red" /><em>This</em> is a checkbox2
<br /></div><divclass="space"></div><divclass="row"id="item3"class="box">
Item 3 Details for the PDF test.
<br><inputtype="checkbox"id="check3"name="sample[]"value="red" /><em>This</em> is a checkbox3
<br /></div><divclass="space"></div><divclass="row"id="item4"class="box">
Item 4 Details for the PDF test.
<br><inputtype="checkbox"id="check4"name="sample[]"value="red" /><em>This</em> is a checkbox4
<br /></div><divclass="space"></div><center><divclass="container1"><divclass="row"><divclass="col-md-8"><p><aclass="btn btn-primary btn-lg download-pdf"href="#"role=button>Download PDF</a></p></div></div></div></center><divid="print"style="background-color:#fff"></div><scripttype="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 = newjsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} elseif (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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script><scriptsrc="js/bootstrap.js"type="text/javascript"></script><linkrel="stylesheet"href="css/bootstrap.css"><linkrel="stylesheet"href="css/bootstrap-theme.css"></head><style>#item1 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item2 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item3 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
#item4 {
padding: 20px;
width: 300px;
height: 100px;
text-align: center;
background: #ddd;
border-radius: 4px4px4px4px;
box-shadow: 3px3px3px#333;
}
.space {
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px4px4px4px;
}
.box.after-submit {
display: none;
}
</style><body><divclass="container"id="records"style="background-color:#fff; width: 400px; margin: 0 auto;"><br/><divclass="row"id="item1"class="box"><divclass="after-submit">
Some <strong>HTML</strong> here 1
</div><divclass="before-submit">
Item 1 Details for the PDF test.
<br><inputtype="checkbox"id="check1"name="sample[]"value="red" /><em>This</em> is a checkbox1
<br /></div></div><divclass="space"></div><divclass="row"id="item2"class="box"><divclass="after-submit">
Some <strong>HTML</strong> here 2
</div><divclass="before-submit">
Item 2 Details for the PDF test.
<br><inputtype="checkbox"id="check2"name="sample[]"value="red" /><em>This</em> is a checkbox2
<br /></div></div><divclass="space"></div><divclass="row"id="item3"class="box"><divclass="after-submit">
Some <strong>HTML</strong> here 3
</div><divclass="before-submit">
Item 3 Details for the PDF test.
<br><inputtype="checkbox"id="check3"name="sample[]"value="red" /><em>This</em> is a checkbox3
<br /></div></div><divclass="space"></div><divclass="row"id="item4"class="box"><divclass="after-submit">
Some <strong>HTML</strong> here 4
</div><divclass="before-submit">
Item 4 Details for the PDF test.
<br><inputtype="checkbox"id="check4"name="sample[]"value="red" /><em>This</em> is a checkbox4
<br /></div></div><divclass="space"></div><center><divclass="container1"><divclass="row"><divclass="col-md-8"><p><aclass="btn btn-primary btn-lg download-pdf"href="#"role=button>Download PDF</a></p></div></div></div></center><divid="print"style="background-color:#fff"></div><scripttype="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 = newjsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById('records'), function() {});
var file = 'test';
if (typeof doc !== 'undefined') {
doc.save(file + '.pdf');
} elseif (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'"