jQuery change input text to selectmenu when click and post update new data

Updated: 5 November 2016

ระบบเบิกจ่ายวัสดุ มีปัญหาของผู้ใช้งานอยู่ประเด็นหนึ่งที่หลีกเลี่ยงไม่ได้ เนื่องจากผู้ใช้บางคนไม่รู้่ว่าตัวเองต้องเบิกวัสดุประเภทไหน หมึกพิมพ์รุ่นไหน ยี่ห้ออะไร ทำให้ทำรายการผิดพลาด ซึ่งวิธีการแก้ไขก็คือให้ผู้ดูแลแก้ไขรายการให้ถูกต้อง เพราะผู้ดูแลจะทราบดีว่าแผนกไหน ใช้เครื่องพิมพ์อะไร ต้องใช้หมึกพิมพ์รุ่นไหน ดังนั้น หากจะทำการแก้ไขแบบธรรมดา มันก็ดูจะง่ายไป แค่ select และ update ใครก็ทำได้ ทีนี้เราต้องการลดระยะเวลาและขั้นตอนการเดินการของผู้ดูแล เช่นเดียวกับ facebook หรือเว็บอื่นที่ ให้เจ้าของกดที่ input และแก้ไขได้ทันที ไม่ต้องมีปุ่มอะไรให้วุ่นวาย ในทีนี้จะทำคล้ายกับ facebook edit มาดูตัวอย่างกันดังนี้ครับ

# edit -> click
-- input[type=text][ord_name] => hide()
-- select[new_stock] => show()
# choose new stock[name] -> save -> click
-- select[sk_id] => update() => $.post(new_stock_id,ord_id) => test.php
-- select[new_stock] => hide()
-- input[type=text][ord_name] => show() => value(new_stock_name)
-- table>row #ord_{ord_id} => change -> text()

เริ่มจากปุ่มแก้ไข ใส่ code

onclick="$('#sk_id').hide();$('#sk_new').show();"

ตัวอย่างของ html

ส่วนของ script

$("#sendUpdate").click(function() {
 var sk_id_new = $('#sk_id_new').val(),
  sk_id_name = $('#sk_id_new option:selected').text(),
  ord_id = $('#ord_id').val();
 $.post(
  "test.php",
  {ord: ord_id, sk: sk_id_new},
  function(data) {
   $('#sk_new').hide();
   $('#sk_id').show();
   $('#ord_name').val(sk_id_name);
   $('#ord_' + ord_id).text(sk_id_name);
//   alert(data);
  });
});

ตรง function นี้ประกอบด้วย

$('#sk_new').hide(); //ซ่อน select menu
$('#sk_id').show(); // แสดง input อันเดิม
$('#ord_name').val(sk_id_name); // เปลี่ยนค่าให้ input อันเดิม
$('#ord_' + ord_id).text(sk_id_name); // เปลี่ยนค่าใน table row อื่นๆ
//alert(data); //ทดสอบว่าข้อมูลส่งได้มั้ย มีอะไร return กลับมา

• Facebook
• X
• Line

input javascript jquery post selectmenu

Thanikul Sriuthis

Full-Stack Developer, Health Informatician