001.<?php
002.
003.
004.?>
005.<html>
006.<head>
007.<title>ThaiCreate.Com Ajax Tutorial</title>
008.</head>
009.<script language="JavaScript">
010. var HttPRequest = false;
011.
012. function doCallAjax(fProductID,fProductName,fPrice) {
013. HttPRequest = false;
014. if (window.XMLHttpRequest) {
015. HttPRequest = new XMLHttpRequest();
016. if (HttPRequest.overrideMimeType) {
017. HttPRequest.overrideMimeType('text/html');
018. }
019. } else if (window.ActiveXObject) {
020. try {
021. HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
022. } catch (e) {
023. try {
024. HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
025. } catch (e) {}
026. }
027. }
028.
029. if (!HttPRequest) {
030. alert('Cannot create XMLHTTP instance');
031. return false;
032. }
033.
034. var url = 'AjaxGetFill.php';
035. var pmeters = "tProductID=" + encodeURI( document.getElementById(fProductID).value);
036.
037. HttPRequest.open('POST',url,true);
038.
039. HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
040. HttPRequest.setRequestHeader("Content-length", pmeters.length);
041. HttPRequest.setRequestHeader("Connection", "close");
042. HttPRequest.send(pmeters);
043.
044.
045. HttPRequest.onreadystatechange = function()
046. {
047.
048.
049.
050.
051.
052.
053. if(HttPRequest.readyState == 4)
054. {
055. var myProduct = HttPRequest.responseText;
056. if(myProduct != "")
057. {
058. var myArr = myProduct.split("|");
059. document.getElementById(fProductName).value = myArr[0];
060. document.getElementById(fPrice).value = myArr[1];
061. }
062. }
063.
064. }
065.
066. }
067. </script>
068.<body>
069.<h1>Auto Fill Form</h1>
070.<form name="frmMain">
071.<table width="390" border="1">
072. <tr>
073. <th width="84">Product ID </th>
074. <th width="185">Product Name </th>
075. <th width="99">Price</th>
076. </tr>
077. <tr>
078. <th>
079. <div align="center">
080. <input type="text" name="txtProductID1" id="txtProductID1" size="5" OnChange="JavaScript:doCallAjax('txtProductID1','txtProductName1','txtPrice1');">
081. </div></th>
082. <th><input type="text" name="txtProductName1" id="txtProductName1" size="30"></th>
083. <th><input type="text" name="txtPrice1" id="txtPrice1" size="10"></th>
084. </tr>
085. <tr>
086. <th>
087. <div align="center">
088. <input type="text" name="txtProductID2" id="txtProductID2" size="5" OnChange="JavaScript:doCallAjax('txtProductID2','txtProductName2','txtPrice2');">
089. </div></th>
090. <th><input type="text" name="txtProductName2" id="txtProductName2" size="30"></th>
091. <th><input type="text" name="txtPrice2" id="txtPrice2" size="10"></th>
092. </tr>
093. <tr>
094. <th>
095. <div align="center">
096. <input type="text" name="txtProductID3" id="txtProductID3" size="5" OnChange="JavaScript:doCallAjax('txtProductID3','txtProductName3','txtPrice3');">
097. </div></th>
098. <th><input type="text" name="txtProductName3" id="txtProductName3" size="30"></th>
099. <th><input type="text" name="txtPrice3" id="txtPrice3" size="10"></th>
100. </tr>
101.</table>
102.</form>
103.</body>
104.</html>
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
