We get data dynamically from different sources and then javascript (say, data injector) update multiple controls with that data - controls like textboxes, dropdowns and checkboxes and some other which get updated data after executing the javascript. The html page view updates, showing correct values.
We need to send final html to another system (say, end service) where javascripts cannot be executed. But the updates are not reflecting in the outerHtml. How can we force an update to DOM which reflects in Html, or how we can get the final html.
We cannot make changes to data injector javascript to use attribute updates as suggested here - Why doesn't the value attribute of the input change? i.e.,
document.getElementById("p1").setAttribute("value", "New text");
is not feasible
<html>
<body>
<h2>JavaScript can Change HTML</h2>
<input id="p1" value="initial" />
<p>The paragraph above was changed by a script.</p>
<script>
document.getElementById("p1").value = "New text"; //This works fine - injector js updates multiple controls - input, select, checkbox etc.
console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly
// TODO: Can we Force html refresh/update - how?? //
console.log(document.getElementById("p1").outerHTML); //Issue is here, it shows old value. How to get full html with all new values, expected by end service
</script>
</body>
</html>Actual value in outerHtml - <input id="p1" value="initial">
Expected value by end service - <input id="p1" value="New text">
We are not restricted to using outerHtml, if there is any other way to achieve the above requirement without making changes to data injector scripts. What can be done to obtain updated html for sending to the end service?
How to get the updated values from the outerHTML after getting the values from javascript?
Use setAttribute
document.getElementById("p1").setAttribute("value", "New text"); //This works fine - injector js updates multiple controls - input, select, checkbox etc.
console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly
console.log(document.getElementById("p1").outerHTML);<h2>JavaScript can Change HTML</h2>
<input id="p1" value="initial" />
<p>The paragraph above was changed by a script.</p>Here are all of the element types
document.getElementById("p1").value = "New text"
document.getElementById("s1").value = "2"
document.getElementById("txta").value = "New text"
document.getElementById("rad2").checked = true;
document.getElementById("chk").checked = true;
console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly
console.log(document.getElementById("p1").outerHTML);
document.getElementById("saveAttr").addEventListener("click", function() {
[...document.getElementById("form1").elements].forEach(inp => {
console.log(inp.tagName, inp.type)
if (inp.tagName === "TEXTAREA") inp.innerText = inp.value;
else if (inp.tagName.startsWith("SELECT")) {
inp.querySelectorAll("option").forEach(opt => {
if (opt.selected) opt.setAttribute("selected",true);
else opt.removeAttribute("selected");
})
}
else if (inp.tagName === "INPUT" && inp.type === "radio") {
document.querySelectorAll(`#form1 [name=${inp.name}]`).forEach(rad => {
if (rad.checked) rad.setAttribute("checked", true);
else rad.removeAttribute("checked")
});
} else if (inp.tagName === "INPUT" && inp.type === "checkbox") {
if (inp.checked) inp.setAttribute("checked", true);
else inp.removeAttribute("checked")
} else inp.setAttribute('value', inp.value);
});
console.log(document.getElementById("container").outerHTML);
})<h2>JavaScript can Change HTML</h2>
<div id="container">
<form id="form1">
<input id="p1" value="initial" />
<select id="s1">
<option value="">Please select</option>
<option value="1" selected>One</option>
<option value="2" selected>Two</option>
</select>
<label>One: <input type="radio" name="rad" id="rad1" value="1" checked /></label>
<label>Two: <input type="radio" name="rad" id="rad2" value="2" /></label>
<input type="checkbox" name="chk" id="chk" value="one" />
<textarea id="txta" name="txta">Initial text</textarea>
<p>The values above were changed by a script.</p>
</form>
<button type="button" id="saveAttr">Save all attributes</button>
</div>