A-AA+then

มีปัญหาเปลี่ยน div ให้เป็น textarea รบกวนอาจาร์ดูโค๊ดให้หน่อยนะค

2,306
 

    โคดเดิมจะเป็น 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>
 



7 ความคิดเห็น

555+++

งง กับคำถาม....

ถ้าโค้ดถูกต้องตามแนวคิด เดาว่า จะเปลี่ยน div เป็น textarea เมื่อคลิก ....

โค้ดด้านบนอาจใช้ได้กับบางบราวเซอร์ครีบ มีสิ่งที่อาจต้องนึกถึง คือ

ในโค้ด เมื่อ blur จะเป็นการซ่อน textarea แต่การ blur อาจเกิดตอน submit ก็ได้ ซึ่งไม่น่าจะเป็นผลดีเท่าไร และถ้าคิดจะทำในกรณีนั้นอาจต้องยุ่งยากในการเขียนโค้ดเพื่อตรวจสอบ

คำแนะนำ คือ อาจใช้วิธีสร้าง textarea รอไว้เลยก็ได้ครับ และ ทำการซ่อนไว้ เมื่อคลิก div ก็แสดง textarea และ ซ่อน div เมื่ออกจาก textarea ก็คืนค่าจาก textarea ไปยัง div และ ทำการซ่อน textarea และ แสดง div น่าจะทำได้ง่ายกว่าครับ

ทางเลือกอื่นๆก็อาจใช้ Framework ครับ ลองค้นหาคำว่า Editinplace ดู
1

อธิบายสั้นไปหน่อย คืออย่างี้ครับ ปกติโคดนี้จะใช้เป็น text input ซึ่งไม่มีปัญหาคือเวลาเราแก้ไขข้อมูลใน input แล้ว submit มันจะส่งค่า ออกมาให้เห็นเลย ผมต้องการแก้ไข text input ให้เป็น textarea มันแก้ไขข้อมูลได้ แต่พอเรากด submit มันไม่ส่งค่าที่เราแก้ไขเหมือน text input ผมจะแนบโคดเดิมให้อาจารย์ดูด้วยครับ โคดนี้เป็นของอาจารย์หละผมเซฟไว้นานแล้ว เอาคำถามง่ายๆละกันนะครับ ผมจะเปลี่ยนจาก input มาเป็น textarea จะต้องแก้ไขโคดเดิมอย่างไรครับ ขอบคุณครับอาจารย์  

<?
  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>
 
2

ลองเอาแนวคิดที่ผมให้ไว้ไปลองออกแบบดูก่อนครับ
3

เหตุผลที่ต้องการเปลี่ยนนะครับอาจารย์ ผมมีข้อมูลที่ต้องการดึงออกมาจากฐานข้อมูลเพื่อมาแก้ไขซึ่งถ้าเป็นชื่อหรืออีเมล์ไม่มีปัญหาอะไร
เพราะเราดึงมาที่ textbox input ได้ แต่ผมมีข้อมูลที่เป็นพวก detail ซึ่งเป็นข้อมูลจำนวนมาก ถ้าเราเอาออกมาแสดงที่ textbox  input
มันจะเป็นแถวยาวๆ ไม่สามารถแสดงข้อมูลให้เห็นได้ทั้งหมด แต่ถ้าดึงออกมาไว้ใน textarea เหมือน FCK เราจะเห็นข้อมูลทั้งหมด
ผมจึงต้องเปลี่ยนมาใช้ textarea แทน แต่ผมไม่มีความรู้โคด  ajax มากนัก ที่ผมกำลังงงก็คือตรง  function doblur() นั่นหละ
ที่ติดอยู่ก็มี 2 บรรทัดตรง   div.innerHTML = input.value;

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

function divclick( obj )
    {
    var val = obj.innerHTML;
    var id = 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();
    }
    
     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;
    
        }  
ที่ผมลองแก้แล้วเป็นแบบนี้
 ผมไม่รู้ว่ามันรับ ค่าและส่งค่าอย่างไร ขอบคุณครับอาจารย์ที่มาตอบให้นะครับ
4

div.innerHTML = input.value;

หมายถึงเอาข้อความใน input มาใส่ลง div

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

บรรทัดนี้เอา value ไปใส่ ที่ hidden ซึ่งจะทำการ submit
5

แต่ผมใช้ textarea มันจะส่งค่าอย่างไรครับอาจารย์

div.innerHTML = textarea.value  
    document.getElementById( parent +
'Value' ).value = textarea.value 

 
เขียนแบบนี้ได้ไหมครับ
6

อ่านบทความละกัน
7
^