Populating a Form using Ajax & Php

Question

atiqur_29 0 Newbie Poster

12 Years Ago

im very newbie in both php and ajax & i was trying to create a form where if i insert the contact id then the rest of the form field will automatically filled by retriving data from database. to get help from a tuitorial, this what i already done but its didnot work for me! anyone can help? thanks in advance.

here is the html file:

<html> 
    <body> 

        <script language="javascript" type="text/javascript"> 
            <!--  
           //Browser Support Code 
function ajaxFunction(){ 
    var ajaxRequest;  // The variable that makes Ajax possible! 

    try{ 
        // Opera 8.0+, Firefox, Safari 
        ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
        // Internet Explorer Browsers 
        try{ 
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try{ 
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e){ 
                // Something went wrong 
                alert("Your browser broke!"); 
                return false; 
            } 
        } 
    } 
    // Create a function that will receive data sent from the server 
       ajaxRequest.onreadystatechange = function(){ 
        if(ajaxRequest.readyState == 4){ 

            results = ajaxDisplay.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]; 

        } 
    } 
    var idValue = document.getElementById("agid").value;
                var myRandom = parseInt(Math.random()*99999999);  // cache buster
                ajaxDisplay.open("GET", "getagentids.php" + escape(idValue) + "&rand=" + myRandom, true);
    ajaxRequest.send(null);  
} 


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

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

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 .= $agentname . "," . $agentsal . "," . $agenttel . "," . $agentid;
        }
    } else {
        $textout = " , , ," . $param;
    }
}
echo $textout;

mysql_close($con);
?>

javascript php

4 Contributors
7 Replies
2K Views
9 Months Discussion Span
Latest Post 11 Years Ago Latest Post by minitauros

LastMitch

12 Years Ago

@atiqur_29

im very newbie in both php and ajax & i was trying to create a form where if i insert the contact id then the rest of the form field will automatically filled by retriving data from database. to get help from a tuitorial, this what i already done but its didnot work for me! anyone can help? thanks in advance.

What is the issue? You didn't mention anything about an error. You only mention it's not working because you follow a tutotial?

Edited 12 Years Ago by LastMitch because: grammer

LastMitch

12 Years Ago

@atiqur_29

thanks for reply. actually i didn't notice any error & meanwhile its not working too :( what im trying to do is exactly same as

Did you change anything from the code?

Did you create a MYSQL database so you can fetch people names and addresses?

Did you create a database with a table? You need a database in order to ajax the info.

You didn't follow the instructions. I notice you make some changes. Just copy exactly on it looks like on the website and test it out first. If you do that and it works then you can make changes.

You change this:

<td><input id="agid" type="text" name="contactid" onKeyUp="getagentids();"></td>

to this:

<td><input id="agid" type="text" name="contactid" onKeyUp="ajaxFunction();"></td>

My advice test out the code and see how it works then make changes.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

atiqur_29 0 Newbie Poster · Answer 1 · 2012-11-03T06:14:45+00:00

What is the issue? You didn't mention anything about an error. You only mention it's not working because you follow a tutotial?

thanks for reply. actually i didn't notice any error & meanwhile its not working too :( what im trying to do is exactly same as http://www.crackajax.net/popform.php

atiqur_29 0 Newbie Poster · Answer 2 · 2012-11-03T08:21:02+00:00

@LastMitch

thanks for your kind feedback.

I modified the code a bit because I tried exactly the same code before but it didn't work for me. later i learned that i need ajax brower code to auto populated the form.. so i add fucntion ajaxFunction() & put the other functions inside it.

yes, I already created database with the table.

is there anything wrong with the browser code or writing the function? my compiler doesn't show any error..

now i tried this way, still it doesn't work:

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

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

    try{ 
        // Opera 8.0+, Firefox, Safari 
        ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
        // Internet Explorer Browsers 
        try{ 
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try{ 
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e){ 
                // Something went wrong 
                alert("Your browser broke!"); 
                return false; 
            } 
        } 
    }
            var url = "getagentids.php?param=";
            function getagentids() {
                var idValue = document.getElementById("agid").value;
                var myRandom = parseInt(Math.random()*99999999);  // cache buster
                http.open("GET", url + 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>



and this:

<td>Contact ID:</td>
                    <td><input id="agid" type="text"
                               name="contactid" onKeyUp="ajaxFunction();"></td>

LastMitch · Answer 3 · 2012-11-03T17:28:49+00:00

@atiqur_29

I add fucntion ajaxFunction() & put the other functions inside it

Let me get this straight. This ajax function () is not part of the script at all?

is there anything wrong with the browser code or writing the function? my compiler doesn't show any error..

I'm not sure what you are trying to do? I can't find this code on the link you provided. You know there's alot of ajax code out there. You don't plug in a code thinking it will work this doesn't belong to this form:

    function ajaxFunction(){ 
var ajaxRequest;  // The variable that makes Ajax possible! 
try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    // Internet Explorer Browsers 
    try{ 
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
        try{ 
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e){ 
            // Something went wrong 
            alert("Your browser broke!"); 
            return false; 
        } 
    } 
}

There are more than 1 file in this ajax function() code you found online. If you are gonna plugin your form code in ajax function() you might need to do it for other files too.

danirub 0 Newbie Poster · Answer 4 · 2013-08-19T13:30:49+00:00

Thanks for the gteat scripts.
i get a error in the broswe can't find variable ajaxDisplay

minitauros 151 Junior Poster Featured Poster · Answer 5 · 2013-08-19T14:14:36+00:00

On a sidenote I would like to mention that I too have been messing around with my own AJAX scripts for quite some time, until I finally decided to give jQuery a try. It has a couple of AJAX functions built in, and they work like a charm, at least in my opinion.

It might take one or two hours to get to know jQuery's AJAX functions if you have never used them before, but once you get the hang of it.. man that shit is good.

You can find an introduction to jQuery's AJAX functions here, a bit more detailed tutorial on the same subject here, and, finally, you can find the jQuery website here.