Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับการใช้งาน Auto Fill หน่อยครับ ที่ต้องการการให้แสดงข้อมูลทันที่ โดยไม่ต้องรอให้ กดenter หรือเลือกข้อมูล



 

สอบถามเกี่ยวกับการใช้งาน Auto Fill หน่อยครับ ที่ต้องการการให้แสดงข้อมูลทันที่ โดยไม่ต้องรอให้ กดenter หรือเลือกข้อมูล

 



Topic : 122682



โพสกระทู้ ( 350 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



จากตัวอย่าง https://www.thaicreate.com/community/jquery-auto-fill-textbox.html

ได้ลองทำตามแล้ว แต่ยังไม่ตรงความต้อง

ซึ่งความต้องการคือ เมื่อรับรหัสจากการอ่านบาร์โค้ดด้วยเครื่องอ่าน ลงใน textbox แล้วให้แสดงข้อมูลนั้น ๆ ทันที (ข้อมูลจะมีอยู๋ใน database อยู่แล้ว)

เลยอย่างขอคำแนะนำหน่อยครับ ว่ามีสคริป หรือโค้ดตัวอย่างบ้างมั้ยครับ แล้วถ้าเป็นไปได้ ในช่องที่รับค่า ว่าจะใช้ jquery แสดง icon หรับสำหรับล้างข้อมูลด้วยครับ

ขอวิธีเรียก ลักษณะการเรียก คีย์เวิร์ด เพื่อจะได้นำไปค้นหาต่อได้ครับ



Tag : PHP, MySQL, Ajax, jQuery






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-04-29 23:32:15 By : akkaneetha View : 1745 Reply : 7
 

 

No. 1

Guest


รับค่าลง textbox ก็น่าจะ jquery onChange หรือ bind ผสม keyup change เมื่อ textbox มีการเปลี่ยน ก็ส่งค่าด้วย ajax post ไปคิวรี่ข้อมูลมาแสดง ส่งค่ากับมา json แล้วมาแยกค่า ใส่ฟอร์มที่่เตรียมไว้ ฯลฯ idea นะ เพราะ Code มันยาว โพสต์ให้ก็กลัวว่าจะเข้าใจไม่ตรงกัน เพราะ code มันมีทั้งฟอร์ม html โค้ด jquery โค้ดติดต่อตารางข้อมูล จริงๆขี้เกียจตัดย่อมาล่ะมันยาว
ถ้าว่างจะย่อแล้วอัพโหลดแล้วส่ง link ให้ทาง PM นะ





แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-30 16:38:18 By : Kin-Kee
 


 

No. 2



โพสกระทู้ ( 350 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : Kin-Kee เมื่อวันที่ 2016-04-30 16:38:18
รายละเอียดของการตอบ ::
ลองหาอ่านดู jqery event แล้ว ที่ดูน่าสนใจ ก็เป็น keyup แต่ ไม่รู้จะเขียนโค้ดไปผูกกับ ตัวโค้ดที่ใช้สำหรับ auto fill ยังไงครับ

Code (JavaScript)
<script type="text/javascript">
		$(document).ready(function(){
		
			$('#txtCustomerID').keyup(function() {
			 // alert('Handler for .keyup() called. and #txtCustomerID=' + $("#txtCustomerID").val());
			  ////////////////////////////////////////////////////
					  //$("#txtCustomerID").change(function(){
					$.ajax({ 
						url: "returnCustomer.php" ,
						type: "POST",
						data: 'sCusID=' +$("#txtCustomerID").val()
					})
					.success(function(result) { 
		
						var obj = jQuery.parseJSON(result);
						
							if(obj == '')
							{
								$('input[type=text]').val('');
							}
							else
							{
								  $.each(obj, function(key, inval) {
		
									   //$("#txtCustomerID").val(inval["IDstd"]);
									   $("#txtName").val(inval["IDstd"]);
									   $("#txtEmail").val(inval["fname"]);
									   $("#txtCountryCode").val(inval["class"]);
									   $("#txtBudget").val(inval["room"]);
									   $("#txtUsed").val(inval["yearin"]);
		
								  });
							}
		
					});
		
				//});
		///////////////////////////////////////
			});

		});
</script>


ลองแทรกโค้ดไปตรงเลย ก็ทำงานไม่ได้

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-04-30 18:36:04 By : akkaneetha
 

 

No. 3

Guest


Code เรา 2 คนใกล้เคียงกันมาก วนลูปเหมือนกัน เราใช้ .bind ตาม Code 

        $('#idStudent').bind('keyup change', function () {
            var idStudent = $("input[name*='idStudent']").val();
            if (idStudent.length <= 7) {
                $("input[name*='idStudent']").focus();
                $("input[name*='idStudent']").addClass('error-style');
                return false;
            } else {
                $("input[name*='idStudent']").removeClass('error-style');


                $.ajax({
                    url: "return_ids.php",
                    type: "POST",
                    data: 'ids=' + $("#idStudent").val(),
                    success: function (result) {
                        //console.log(result);
                        var obj = $.parseJSON(result);
                        //console.log(obj);
                        if (obj === "") {
                            //$("#idStudent").val('');
                            $("input[name*='nameStudent']").focus();
                            $("input[name*='nameStudent']").val('');
                            $("select[name*='nameDegree']").val('');
                            $("select[name*='nameFaculty']").val('');
                            $("#nameDevice").removeClass('error-style');
                        } else {
                            $("#nameDevice").addClass('error-style');
                            $("#room1").focus();
                            $.each(obj, function (key, inval) {
                                $("#idStudent").val(inval["idS"]);
                                $("input[name*='nameStudent']").val(inval["ns"]);
                                $("select[name*='nameDegree']").val(inval["idD"]);
                                $("select[name*='nameFaculty']").val(inval["idF"]);
                            });

                        }
                    }
                });
            }


        });


ส่วนอันนี้เป็น Code ในส่วน return_ids.php
if($mysql->query(" SELECT * FROM [tb_student] WHERE [idStudent] like '".$_POST['ids']."'") > 0 ){
    
while($rs = $mysql->fetch()){

    $result[]=array(    
        "idS"=>$rs['idStudent'],    
        "ns"=>$rs['nameStudent'],       
        "idD"=>$rs['idDegree'], 
        "idF"=>$rs['idFaculty'],  
    );      
}
        $mysql->close();
        echo json_encode($result);
}else{
    $result = '';
    echo json_encode($result);
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-01 09:18:50 By : Kin-Kee
 


 

No. 4

Guest


ต่างกันตรงส่งค่ากลับมาใส่ฟอร์ม ลองเปลี่ยนการเลือก ว่าจะใช้ name หรือ id ของ text type input นั้นๆ ดู
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-01 09:21:12 By : Kin-Kee
 


 

No. 5



โพสกระทู้ ( 350 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : Kin-Kee เมื่อวันที่ 2016-05-01 09:18:50
รายละเอียดของการตอบ ::
ขอบคุณครับ เดี๋ยวจะลองนำโค้ดไปปรับใช้ดูครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-01 22:02:15 By : akkaneetha
 


 

No. 6



โพสกระทู้ ( 350 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ยัง ตอบความคิดเห็นที่ : 3 เขียนโดย : Kin-Kee เมื่อวันที่ 2016-05-01 09:18:50
รายละเอียดของการตอบ ::
ยังไม่ได้เลยครับ
ผมลองแก้ดูแล้ว ไม่รู้ว่าแก้ถูกมั้ย
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $('#txtIDstd').bind('keyup change', function () {
            var txtIDstd = $("input[name*='txtIDstd']").val();
            if (txtIDstd.length <= 4) {
                $("input[name*='txtIDstd']").focus();
                $("input[name*='txtIDstd']").addClass('error-style');
                return false;
            } else {
                $("input[name*='txtIDstd']").removeClass('error-style');
                $.ajax({
                    url: "return_ids.php",
                    type: "POST",
                    data: 'IDstd=' + $("#txtIDstd").val(),
                    success: function (result) {
                        //console.log(result);
                        var obj = $.parseJSON(result);
                        //console.log(obj);
                        if (obj === "") {
                            //$("#idStudent").val('');
                            $("input[name*='txtIDstd']").focus();
                            $("input[name*='txtIDstd']").val('');
                            $("select[name*='txtfname']").val('');
							$("select[name*='txtlname']").val('');
							$("select[name*='txtclass']").val('');
							$("select[name*='txtroom']").val('');
                            $("select[name*='txtyearin']").val('');
                            $("#nameDevice").removeClass('error-style');
                        } else {
                            $("#nameDevice").addClass('error-style');
                            $("#room1").focus();
                            $.each(obj, function (key, inval) {
                                $("#txtIDstd").val(inval["IDstd"]);
								$("#txtfname").val(inval["fname"]);
								$("#txtlname").val(inval["lname"]);
								$("#txtclass").val(inval["class"]);
								$("#txtroom").val(inval["room"]);
								$("#txtyearin").val(inval["yearin"]);
                                //$("input[name*='txtIDstd']").val(inval["IDstd"]);
								//$("select[name*='txtfname']").val(inval["fname"]);
                                //$("select[name*='txtlname']").val(inval["lname"]);
								//$("select[name*='txtclass']").val(inval["class"]);
								//$("select[name*='txtroom']").val(inval["room"]);
                                //$("select[name*='txtyearin']").val(inval["yearin"]);
                            });

                        }
                    }
                });
            }


        });
</script>
<style>
@import "compass/css3";
.test {
  display: block;
  margin-bottom: 1em;
  border: 1px solid silver;
  width: 100%;
  padding: .5em;
}

.test:read-only {
  background: #CCCCCC;
  color:#000000;
}

.test:read-write {
  background: lightgreen;
}

* {
  box-sizing: border-box;
}

body {
  padding: 1em;
}
</style>
</head>

<body OnLoad="document.autofill.txtIDstd.focus();">
<h2>jQuery Auto fill ดึงข้อมูลอัตโนมัติ</h2>
<form method="post" enctype="multipart/form-data" name="autofill" id="autofill">
<table width="302" border="1">
  <tr>
    <td>&nbsp;</td>
    <td><input type="text" id="room1" name="room1" /></td>
  </tr>
  <tr>
    <td width="104">IDstd</td>
    <td width="153"><input type="text" id="txtIDstd" name="txtIDstd"></td>
  </tr>
  <tr>
    <td>fname</td>
    <td><input type="text" id="txtfname" name="txtfname"></td>
  </tr>
  <tr>
    <td>lname</td>
    <td><input name="txtlname" type="text" id="txtlname"></td>
  </tr>
  <tr>
    <td>class</td>
    <td><input type="text" id="txtclass" name="txtclass"></td>
  </tr>
  <tr>
    <td>room</td>
    <td><input type="text" id="txtroom" name="txtroom"></td>
  </tr>
  <tr>
    <td>yearin</td>
    <td><input type="text" id="txtyearin" name="txtyearin"></td>
  </tr>
</table>
</form>
</body>
</html>


Code (PHP)
<?php
include("db_connect.php");
$mysqli = connect();
$sql="SET CHARACTER SET UTF8";

$sql="SELECT * FROM member WHERE IDstd like '".$_POST['IDstd']."'";
//$sql="SELECT * FROM member WHERE IDstd like '09180' ";
//$sql="SELECT * FROM tb_course WHERE courseID='1' ";
//$qr=select($sql); // select ข้อมูลในฐานข้อมูลมาแสดง กรณีดึงมาแค่รายการแรกรายการเดียว
//$rs=$qr[0]; // จำเป็นต้องกำหนด
if($qr=select($sql)) {
$rs=$qr[0];
		$result[]=array(
        "IDstd"=>$rs['IDstd'],
        "fname"=>$rs['fname'],       
        "lname"=>$rs['lname'],
		"class"=>$rs['class'],
		"room"=>$rs['room'], 
        "yearin"=>$rs['yearin'],   
		);
		
        $mysqli->close();
        echo json_encode($result);
}else{
    $result = '';
    echo json_encode($result);
}
?>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-02 13:08:17 By : akkaneetha
 


 

No. 7

Guest


jquery-1.6.4.js ของผมใช่ jquery-1.11.3.min.js ลองเปลี่ยน version ล่าสุด

ส่วน .addClass('error-style'); เป็นคลาส CSS ที่กำหนดขึ้นเอง ถ้าผิด หรือ ไม่ถูกต้อง มันจะเป็นกรอบสีแดง ๆ 

.error-style{
   border: 1px solid #FF0000 !important;
   border-radius: 5px;
   }


ผมไม่ได้ไล่ name id ให้นะ

ส่วนอื่น ๆ ใน code หน้า php ถ้าใช้ debug(Develop tool) ของ google chrome เข้าไปที่่ แท็บ network เวลาส่งค่า ajax ไปที่เพจ จะเกิดไฟล์ ชื่อนั้น ๆ ขึ้นมา ให้คลิกเข้าไปดู ว่ามันเกิดข้อมูลจริงไหม หรือ จะใส่ echo $_POST['IDstd']; เช็คว่าข้อมูลมันส่งไปจริงไหม มันจะเห็น Error ถ้ามี มันจะไล่กลับมาถูกว่าอะไรผิดพลาด

หรือจะใช้ console.log(result); ที่ปิดไว้ ดูว่าค่าอะไรมันกลับมาบ้าง

คงหมดคำแนะนำครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-05-02 13:55:51 By : Kin-Kee
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : สอบถามเกี่ยวกับการใช้งาน Auto Fill หน่อยครับ ที่ต้องการการให้แสดงข้อมูลทันที่ โดยไม่ต้องรอให้ กดenter หรือเลือกข้อมูล
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่