Question

我有一个有用的教程，如果你输入'id'[或你的id的前1-2个字母]，表单的其余部分将通过从mysql数据库中提取数据自动填充。没有按ENTER键就会发生这件事！现在，我要做的是，我将输入完整的'id'和＆amp;按ENTER键填写表格的其余部分！下面的代码需要进行哪些修改？这是我的index.html文件：

<html> 
    <body> 
        <script language="javascript" type="text/javascript">

        function ajaxFunction(){ 
    var http;  // The variable that makes Ajax possible! 

    try{ 
        // Opera 8.0+, Firefox, Safari 
        http = new XMLHttpRequest(); 
    } catch (e){ 
        // Internet Explorer Browsers 
        try{ 
            http = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try{ 
                http = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e){ 
                // Something went wrong 
                alert("Your browser broke!"); 
                return false; 
            } 
        }
    }

    var url = "getagentids.php?param=";
                var idValue = document.getElementById("agid").value;
                var myRandom = parseInt(Math.random()*99999999);  // cache buster
                http.open("GET", "getagentids.php?param=" + escape(idValue) + "&rand=" + myRandom, true);
                http.onreadystatechange = handleHttpResponse;
                http.send(null);
         function handleHttpResponse() {
                    if (http.readyState == 4) {
                        results = http.responseText.split(",");
                        document.getElementById('agfn').value = results[0];
                        document.getElementById('agsal').value = results[1];
                        document.getElementById('agtel').value = results[2];
                        document.getElementById('agid').value = results[3];
                    }
                } 
    }
</script> 

        <form name="schform">
            <table>
                <tr>
                    <td>Contact ID:</td>
                    <td><input id="agid" type="text"
                               name="contactid" onKeyUp="ajaxFunction()"></td>
                </tr>
                <tr>
                    <td>Tel Number:</td>
                    <td><input id="agtel" type="text"
                               name="contacttel"></td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input id="agfn" type="text"
                               name="contactfullname"></td>
                </tr>
                <tr>
                    <td>Salutation:</td>
                    <td><input id="agsal" type="text"
                               name="contactsalutation"></td>
                </tr>
                <tr>
                    <td><input type="reset" value="Clear"></td>
                    <td></td>
                </tr>
            </table>
        </form>

    </body> 
</html>

这是我的getagentids.php文件：

<?php

error_reporting(0); // turns off error reporting

$con = mysql_connect("localhost", "root", "");
if (!$con) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db("contactdetail", $con);

 mysql_select_db("contactdetail");

 $param=$_GET['param']; 

if (strlen($param) > 0) {
    $result = mysql_query("SELECT * FROM contact 
     WHERE contactid LIKE '$param%'");
    if (mysql_num_rows($result) == 1) {
        while ($myrow = mysql_fetch_array($result)) {
            $agentname = $myrow["contactfullname"];
            $agenttel = $myrow["contacttel"];
            $agentsal = $myrow["contactsalutation"];
            $agentid = $myrow["contactid"];
            $textout .= $agentid . ", " . $agentname . ", " . $agenttel . ", " . $agentsal;
        }
    } else {
        $textout = " , , ," . $param;
    }
}
echo $textout;
?>

Answer 1

首先创建一个javascript函数来检测是否按下了Enter键并从中调用ajaxFunction：

function run(e) {
    if (e.keyCode == 13) {
       ajaxFunction();
       return false; //disable the default Enter behavior 
    }
    return true;
}

将联系人ID文字输入中的onKeyUp="ajaxFunction()"来电更改为onKeyUp="run()"

Answer 2

您可以更改ajaxFunction之类的内容（只需将代码粘贴到ajaxFunction的顶部）

function ajaxFunction(e){
    var e=e || window.event;
    var keycode=e.which || e.keyCode;
    if(keycode!==13 || (e.target||e.srcElement).value=='') return false;
   // rest of your code
}

并使用此更改onKeyUp（在参数中注意event）

<input id="agid" type="text" name="contactid" onKeyUp="ajaxFunction(event)">

Just for an idea

按Enter键后自动填充文本字段

2 个答案: