เปลี่ยน div ให้เป็น input เมือคลิก

สภาวะปกติจะแสดงผลเป็น div เมื่อเิอาเมาส์คลิก จะกลายเป็นช่อง input ให้กรอก และเมื่อย้ายโฟกัสไปตัวอื่น ก็็จะกลับเป็น div ตามเดิม

<!--ค่าที่ได้มาจากการ submit สังเกตุดู ชื่อที่ใช้รับค่า-->

<?

  echo $_POST[userValue]."<br />";

  echo $_POST[passwordValue]."<br />";

?>



<form method="post" action="?">

<p><label for="user">user :</label><div id="user" onclick="divclick(this)">goragod</div></p>

<p><label for="password">password :</label><div id="password" onclick="divclick(this)">1234</div></p>

<!--Input ซ่อน สำหรับใช้ในการ submit ค่าเริ่มต้นให้กำหนดให้เท่ากับ ค่าที่กรอกลงใน div ข้างบน และต้องมีจำนวนเท่ากับฟิลด์ที่ต้องการ-->

<input type="hidden" name="userValue" id="userValue" value="goragod" />

<input type="hidden" name="passwordValue" id="passwordValue" value="1234" />

<input type="submit" />

</form>



<script type="text/javascript">

function divclick( obj )

{

  var val = obj.innerHTML;

  var id = obj.id + 'Text';

  obj.innerHTML = '<input type="text" id="'+ id + '" name="'+ id + '" value="' + val + '" onblur="doblur(this,\''+obj.id+'\')" />';

  obj.onclick = "";

  document.getElementById( id ).focus();

}

function doblur( input , parent )

{

  var div = document.getElementById( parent )

  div.innerHTML = input.value;

  div.onclick = function(){divclick(this)};

  document.getElementById( parent + 'Value' ).value = input.value;

}

</script>