การเปลี่ยน Span เป็น Input อย่างง่าย
<!DOCTYPE html>
<html lang=th dir=ltr>
<head>
<meta charset=utf-8>
<title>Test</title>
<style>
#user, #password {
display: none; /* ซ่อนไว้ก่อน */
}
</style>
</head>
<body>
<?php
print_r($_POST);
?>
<form method=post action=?>
<p>
<label>User : <span id=sp_user>Demo</span><input type=text name=user id=user value="Demo"></label>
</p>
<p>
<label>Password : <span id=sp_password>Test</span><input type=text name=password id=password value="Test"></label>
</p>
<p>
<button>Submit order</button>
</p>
</form>
<script>
var doclick = function() {
/* เมื่อคลิกที่พื้นที่แสดงผล ให้แสดง Input */
var input = document.getElementById(this.id.replace('sp_', ''));
/* อ่านค่าไปแสดงที่ Input */
input.value = this.innerHTML;
/* แสดง Input */
input.style.display = 'inline';
this.style.display = 'none';
input.focus();
};
var doblur = function() {
/* เมื่อเมาส์ออกจาก Input */
var span = document.getElementById('sp_' + this.id);
/* คืนค่าใน Input ไปยัง พื้นที่แสดงผล */
span.innerHTML = this.value;
/* เมื่อเมาส์ออกจาก Input ให้ซ่อน */
this.style.display = 'none';
span.style.display = 'inline';
};
/* เมื่อคลิกที่พื้นที่แสดงผล */
document.getElementById('sp_user').onclick = doclick;
document.getElementById('sp_password').onclick = doclick;
/* เมื่อโฟกัสออกจาก Input */
document.getElementById('user').onblur = doblur;
document.getElementById('password').onblur = doblur;
</script>
</body>
</html>โค้ดด้านบนก็ไม่มีอะไรซับซ้อนเลยครับ หลักการก็คือ สร้าง Input ที่ต้องใช้ในการ Submit รอไว้ ตามจำนวนและตำแหน่งของพื้นที่ต้องการแก้ไข โดยที่ในตอนแรกเราจะทำการซ่อน Input ไว้ก่อน เมื่อมีการคลิกที่พื้นที่ที่ต้องการแก้ไข ก็ให้แสดง Input ออกมา และเมื่อเอาเมาส์ออกจาก Input ก็ให้ซ่อนกลับตามเดิม
จากตัวอย่างนี้ ให้สังเกตว่า ทั้ง Input และ พื้นที่แสดงผลต่างกันที่ Id ของพื้นที่แสดงผล มี sp_ นำหน้า เท่านั้นครับ ซึ่งข้อดีของการใช้เทคนิคนี้ก็คือ เราสามารถใช้ฟังก์ชั่นเดิมซ้ำๆกับหลายๆ Input ได้ครับ