HTML source with JQuery or JavaScript after editing
I'm using this to grab the HTML source for a single html page. It works well except for one thing. After entering values into my html page, when I do the capture, it only grabs the page with no edited values.
Any ideas please.
var getDocTypeAsString = function () {
var node = document.doctype;
return node ? "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>\n' : '';
};
function getPageHTML() {
// alert( "<html>" + $("html").html() + "</html>" );
console.log(getDocTypeAsString() + document.documentElement.outerHTML);
}
and call from the button
<div class="no-print">
<div class="buttonBar">
<input type="button" class="button" value="Print" onClick="window.print()">
<input type="button" class="button" value="Save" onClick="getPageHTML()">
</div>
</div>
The edit values will come from similar fields like this So I would like to capture the edited "PastMedicalHistory" as well
<div class='row'>
<div class='cell100'>
<div class='table'>
<div class='cell100 content'>
<textarea id='PMH' class='basicTextArea PMHText' name="PastMedicalHistory"></textarea>
</div>
</div>
</div>
</div>
source to share
Found something that seems to be working fine, but I'm not an expert enough to judge it from possible limitations
keep track of such elements
$( document ).ready(function() {
var isDirty = false;
$("textarea").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
$("input").on("change", function() {
isDirty = (this.defaultValue !== this.value);
if (isDirty)
this.defaultValue = this.value;
});
});
call new html source like this
function getPageHTML() {
console.log( "<html>" + $("html").html() + "</html>");
}
source to share
What are you trying to achieve?
The statement document.documentElement.outerHTML
will render the HTML itself as renderable.
The values of the input elements are filled in afterwards, so they are not displayed through outerHTML
.
You can fire elements, inspect them, and populate the DOM.
Which would be better, but to describe what you are trying to achieve and put the complete example code on codepen or similar.
source to share