<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
let eid = $(this).attr("id");
let e = eid.substr(0, eid.length - 1);
if ($(this).val() == "") {
$("#" + e + "p").show();
} else {
$("#" + e + "p").hide();
}
$("#" + e).text($(this).val());
});
$("button").click(function() {
if ($(this).text() == "Next") {
let next = $(this).parent().next();
$(this).parent().hide();
next.show().find(":text").focus();
} else if ($(this).text() == "Back") {
let back = $(this).parent().prev();
$(this).parent().hide();
back.show().find(":text").focus();
} else {
// save content
alert($("#content").text().replace(/____/g, ""));
}
});
});
</script>
</head>
<body>
<!-- start user input -->
<div>Enter your name: <input type="text" id="namet"><button>Next</button></div>
<div style="display: none">Enter your favorite color: <input type="text" id="colort"><button>Back</button><button>Finish</button></div>
<!-- end user input -->
<!-- start document template -->
<p id="content">Enter your name and color in the input field above. It will change background color on keydown and keyup. <span id="namep" title="name">____</span><span id="name" style="background-color: yellow"></span> is your input name. You like <span id="colorp" title="color">____</span><span id="color" style="background-color: yellow"></span>.</p>
<!-- end document template -->
</body>
</html>
อาจใช้ docx library โดยเฉพาะ ...เข้ามาช่วยในการจัดหน้าให้ง่ายขึ้นแล้วส่งเฉพาะ data
ไปทำงานที่ server ด้วย template processing ซึ่งมี placeholder ในการอัปเดต data
Load balance : Server 01
