CODEWITHSUNDEEP
phpajax
atiquratik
atiquratik

Reputation: 1300

auto fill text field after pressing enter key

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

Upvotes: 1

Views: 3188

Answers (2)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 1

Mohd Moe
Mohd Moe

Reputation: 577

first create a javascript function to detect if the Enter key is pressed and call the ajaxFunction from within it:

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

change the onKeyUp="ajaxFunction()" call in the Contact ID text input into onKeyUp="run()"

Upvotes: 2

Related Questions