A-AA+then

จาก HowTo เปลี่ยน div ให้เป็น input เมือคลิก เมื่อต้องการให้มี 2

2,475
จาก HowTo http://www.goragod.com/knowledge-เปลี่ยน%20div%20ให้เป็น%20input%20เมือคลิก.html?search=div

ผมต้องการให้มี 2 ฟอร์มหรือมากกว่า รูปแบบเดียวกันนี้ในหน้าเดียวกัน
ผมทดลองทำ 2 ฟอร์ม

// ยกโค้ดอาจารย์มาเลย

<?
  echo $_POST[userValue]."<br />";
  echo $_POST[passwordValue]."<br />";
?>
<?php
$maxform=2;//สร้าง 2 ฟอร์ม
for($i=1; $i<=$maxform; $i++) {
?>
<form method="post">
<p><label for="user">user :</label><span id="user" onclick="divclick(this)">goragod</span></p>
<p><label for="password">password :</label><span id="password" onclick="divclick(this)">1234</span></p>
<input type="hidden" name="userValue" id="userValue" value="goragod" />
<input type="hidden" name="passwordValue" id="passwordValue" value="1234" />
<input type="submit" />
</form>
<?php } ?>

<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 สิ่งที่ต้องการเกิดขึ้นไม่ได้ดังใจครับ

ก็เลยลองแก้ไขโค้ดโดนการเพิ่ม [] เข้าไปที่หลังชื่อ name และ id และ value[]

<form name=form<?php echo $i; ?> method="post">
<p><label for="user">user :</label><span id="user[]" onclick="divclick(this)">goragod</span></p>
<p><label for="password">password :</label><span id="password[]" onclick="divclick(this)">1234</span></p>
<input type="hidden" name="userValue[]" id="userValue[]" value="goragod" />
<input type="hidden" name="passwordValue[]" id="passwordValue[]" value="1234" />
<input type="submit" />
</form>

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

ผลก็ยังไม่ได้ครับ

ถ้าไม่เป็นการรบกวนเกินไป ท่านใดจะหาทางสว่างให้ก็เชิญได้นะครับ

 

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

ปัญหาคือ id มันจะซ้ำกันครับ ทำให้ใช้ได้แค่เพียงฟอร์มเดียว การแก้ไขในเบื้องต้น อาจต้องใช้วิธีส่งค่าเพิ่มเติมเพื่อระบุว่าฟอร์มไหนครับ

ตัวแปรที่อาจเป็นปัญหาก็คือ var id = obj.id + 'Text'; ครับที่อาจซ้ากันได้ เราอาจกำหนดให้ค่านี้ถูกส่งมาาจากตอนคลิกก็ได้ครับ เพื่อที่จะสามารถควบคุมได้ครับ

เช่น divclick(this. 'Text1') แ้ล้วก็เอาค่า Text1 ไปใช้ในฟังก์ชั่นแทน ส่วนฟอร์มอื่นก็ให้เปลี่ยน Text1 เป็น Text2 ไปเรื่อยๆ ครับ
1

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

อาจารย์ ครับ จาก 2 บรรทัดข้างบน 
ค่า obj.id จาก doblur(this,\''+obj.id+'\')" มีค่า เท่ากับ  id จาก var id = obj.id + 'Text'; หรือเปล่า หรือเป็นคนละค่ากัน

และจาก HowTo http://www.goragod.com/knowledge-เปลี่ยน%20div%20ให้เป็น%20input%20เมือคลิก.html?search=div หลังจากเรา click ที่ ช่อง user: เมื่อเกิด onblur ค่า parent ที่ส่งมากับ onblur คือ userText หรือ user หรือเป็นอย่างอื่นครับ (งง)
2

การดัดแปลงต้องกำหนดค่าต่างๆให้สัมพันธ์กันด้วยครับเนื่องจากมันต้องใช้อ้างอิงถึงกันตลอดโปรแกรม

ห้ามใช้เป็น Array นะครับเนื่องจาก Javascript จะหาไม่เจอ

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

input ด้านบนก็เช่นกันครับ ที่ต้องกำหนดให้ถูกต้อง เนื่องจากมีซ้ำกัน 2 ฟอร์ม ก็จะมีไอดีนี้ 2 ตัว javascript จะ error ได้ครับ ยกตัวอย่าง ก็อาจเปลี่ยนเป็น userText1 เพื่อให้สอดคล้องกับค่าที่ส่ง (เอาแนวทางไปดัดแปลงนะครับ)

ถ้าไม่เข้าใจ ก็มีวิธีที่ง่ายกว่าครับ โดยการสร้างทั้งฟอร์มและฟังก์ชั่น ออกเป็น 2 ชุดเลยครับ ทำงานแยกกันไปเลย โดยมีความสำคัญที่จ้องเปลี่ยน ชื่อฟังก์ชั่น ชื่อ input ต่างๆให้ต่างกันครับ แต่วิธีนี้ก็เหมาะกับฟอร์มจำนวนน้อยๆครับ
3
^