มีปัญหาเปลี่ยน div ให้เป็น textarea รบกวนอาจาร์ดูโค๊ดให้หน่อยนะค
โคดเดิมจะเป็น input ผมมาประยุกต์ใช้เป็น textarea มันส่งค่าไม่ได้ลองทำมา 2 วันแล้ว รบกวนอาจาร์แก้ไขโคดนี้ให้หน่อยนะครับ
ขอบคุณครับ
<?
echo $_POST[userValue]."<br />";
echo $_POST[passwordValue]."<br />";
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="" value="ตกลงยอมรับ" />
</form>
<script type="text/javascript">
function divclick( obj )
{
var val = obj.innerHTML;
var id = obj.id + 'Text';
obj.innerHTML = '<textarea type="text" id="'+ id + '" name="'+ id + '" value="' + val + '" onblur="doblur(this,\''+obj.id+'\')">' + val + '</textarea>';
obj.onclick = "";
document.getElementById( id ).focus();
}
function doblur( textarea , parent )
{
var div = document.getElementById( parent )
div.innerHTML = textarea.value;
div.onclick = function(){divclick(this)};
document.getElementById( parent + 'Value' ).value = textarea.value;
}
</script>
งง กับคำถาม....
ถ้าโค้ดถูกต้องตามแนวคิด เดาว่า จะเปลี่ยน div เป็น textarea เมื่อคลิก ....
โค้ดด้านบนอาจใช้ได้กับบางบราวเซอร์ครีบ มีสิ่งที่อาจต้องนึกถึง คือ
ในโค้ด เมื่อ blur จะเป็นการซ่อน textarea แต่การ blur อาจเกิดตอน submit ก็ได้ ซึ่งไม่น่าจะเป็นผลดีเท่าไร และถ้าคิดจะทำในกรณีนั้นอาจต้องยุ่งยากในการเขียนโค้ดเพื่อตรวจสอบ
คำแนะนำ คือ อาจใช้วิธีสร้าง textarea รอไว้เลยก็ได้ครับ และ ทำการซ่อนไว้ เมื่อคลิก div ก็แสดง textarea และ ซ่อน div เมื่ออกจาก textarea ก็คืนค่าจาก textarea ไปยัง div และ ทำการซ่อน textarea และ แสดง div น่าจะทำได้ง่ายกว่าครับ
ทางเลือกอื่นๆก็อาจใช้ Framework ครับ ลองค้นหาคำว่า Editinplace ดู
<?
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>
เพราะเราดึงมาที่ textbox input ได้ แต่ผมมีข้อมูลที่เป็นพวก detail ซึ่งเป็นข้อมูลจำนวนมาก ถ้าเราเอาออกมาแสดงที่ textbox input
มันจะเป็นแถวยาวๆ ไม่สามารถแสดงข้อมูลให้เห็นได้ทั้งหมด แต่ถ้าดึงออกมาไว้ใน textarea เหมือน FCK เราจะเห็นข้อมูลทั้งหมด
ผมจึงต้องเปลี่ยนมาใช้ textarea แทน แต่ผมไม่มีความรู้โคด ajax มากนัก ที่ผมกำลังงงก็คือตรง function doblur() นั่นหละ
ที่ติดอยู่ก็มี 2 บรรทัดตรง div.innerHTML = input.value;
document.getElementById( parent + 'Value' ).value = input.value;
functiondivclick( obj ){varval = obj.innerHTML;varid = obj.id +'Text';obj.innerHTML ='<textarea rows="10" cols="55" id="'+ id +'" name="'+ id +'" onblur="doblur(this,\''+obj.id+'\')" />'+ val +'</textarea>';obj.onclick ="";document.getElementById( id ).focus();}
functiondoblur(textarea , parent ){vardiv = document.getElementById( parent )div.innerHTML = textarea.value;div.onclick =function(){divclick(this)};document.getElementById( parent +'Value').value = textarea.value;}ที่ผมลองแก้แล้วเป็นแบบนี้
ผมไม่รู้ว่ามันรับ ค่าและส่งค่าอย่างไร ขอบคุณครับอาจารย์ที่มาตอบให้นะครับ
หมายถึงเอาข้อความใน input มาใส่ลง div
document.getElementById( parent + 'Value' ).value = input.value;
บรรทัดนี้เอา value ไปใส่ ที่ hidden ซึ่งจะทำการ submit
div.innerHTML = textarea.value;document.getElementById( parent +
'Value').value = textarea.value;เขียนแบบนี้ได้ไหมครับ