之后pressing自动填充文本字段中输入密钥 [英] auto fill text field after pressing enter key

查看:85
本文介绍了之后pressing自动填充文本字段中输入密钥的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我得到了一个有用的教程在那里,如果你输入'身份证'[或第1-2字母你的id],形式的现场的其余部分将自动从MySQL数据库中提取数据填充。这件事情会发生没有pressing ENTER键!现在,我想要做的是,我会输入完整的'身份证'和; preSS ENTER键,填写表单的字段的休息!需要对低于这个code哪些修改?这是我的index.html文件:

 < HTML>
    <身体GT;
        < SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的>

        功能ajaxFunction(){
    VAR HTTP; //让Ajax成为可能的变量!

    尝试{
        //歌剧8.0+,火狐,Safari浏览器
        HTTP =新XMLHtt prequest();
    }赶上(五){
        // Internet Explorer浏览器
        尝试{
            HTTP =新的ActiveXObject(MSXML2.XMLHTTP);
        }赶上(五){
            尝试{
                HTTP =新的ActiveXObject(Microsoft.XMLHTTP);
            }赶上(五){
                // 出了些问题
                警报(您的浏览器打破了!);
                返回false;
            }
        }
    }

    VAR URL =?getagentids.php参数=;
                。VAR idValue =的document.getElementById(AGID)的价值;
                VAR myRandom = parseInt函数(的Math.random()* 99999999); //缓存克星
                http.open(GET,getagentids.php参数=?+逃生(idValue)+&放大器;兰特=+ myRandom,真正的);
                http.onreadystatechange = handleHtt presponse;
                http.send(空);
         功能handleHtt presponse(){
                    如果(http.readyState == 4){
                        结果= http.responseText.split(,);
                        。的document.getElementById('agfn')值=结果[0];
                        。的document.getElementById('agsal')值=结果[1];
                        。的document.getElementById('agtel')值=结果[2];
                        。的document.getElementById('AGID')值=结果[3]。
                    }
                }
    }
< / SCRIPT>

        <表格名称=schform>
            <表>
                &其中; TR>
                    < TD>联系ID:< / TD>
                    < TD><输入ID =AGID类型=文本
                               NAME =的ContactID的onkeyup =ajaxFunction()>< / TD>
                < / TR>
                &其中; TR>
                    < TD>电话号码:其中; / TD>
                    < TD><输入ID =agtel类型=文本
                               NAME =联系电话>< / TD>
                < / TR>
                &其中; TR>
                    < TD>名称:< / TD>
                    < TD><输入ID =agfn类型=文本
                               NAME =contactfullname>< / TD>
                < / TR>
                &其中; TR>
                    < TD>称呼:< / TD>
                    < TD><输入ID =agsal类型=文本
                               NAME =contactsalutation>< / TD>
                < / TR>
                &其中; TR>
                    < TD><输入类型=复位值=清除>< / TD>
                    < TD>< / TD>
                < / TR>
            < /表>
        < /形式GT;

    < /身体GT;
< / HTML>
 

和这里是我的getagentids.php文件:

 < PHP

使用error_reporting(0); //关闭错误报告

$ CON =的mysql_connect(localhost的根,);
如果(!$ CON){
    死亡(无法连接:mysql_error());
}
mysql_select_db(contactdetail,$ CON);

 mysql_select_db(contactdetail);

 $参数= $ _ GET ['参数'];

如果(strlen的($参数)大于0){
    $结果= mysql_query(SELECT * FROM接触
     WHERE的ContactID LIKE'$参数%');
    如果(mysql_num_rows($结果)== 1){
        而($ myrow = mysql_fetch_array($结果)){
            $ AGENTNAME = $ myrow [contactfullname];
            $ agenttel = $ myrow [联系电话];
            $ agentsal = $ myrow [contactsalutation];
            $的agentId = $ myrow [的ContactID];
            $的TextOut。= $的agentId。 ,。 $ AGENTNAME。 ,。 $ agenttel。 ,。 $ agentsal;
        }
    } 其他 {
        $的TextOut =,。 $参数;
    }
}
回声$的TextOut;
?>
 

解决方案

您可以改变你的 ajaxFunction 类似(只是贴code在顶部的 ajaxFunction

 函数ajaxFunction(五){
    VARê= E || window.event;
    VAR键code = e.which || e.key code;
    如果(键code == 13 ||(e.target || e.srcElement).value的==''!)返回false;
   //你的code休息
}
 

和改变你的的onkeyup 这个(通知事件中的参数)

 <输入ID =AGID类型=文本名称=的ContactID的onkeyup =ajaxFunction(事件)>
 

只是一个想法

i got an useful tutorial where if you input 'id' [or first 1-2 letter of your id], the rest of form's field will filled automatically by pulling data from mysql database. this thing will happen without pressing ENTER key! now, what i'm trying to do is, i'll input the full 'id' & press ENTER key to fill the rest of form's field! what modification would need for this code below? here is my index.html file:

<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> 

and here is my getagentids.php file:

<?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;
?>

解决方案

You can change your ajaxFunction like (just paste the code at the top of your 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
}​

And change your onKeyUp with this (notice event in the argument)

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

Just for an idea.

这篇关于之后pressing自动填充文本字段中输入密钥的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆