Ajax Mysql Query

Question

There is an error in your HTML. You put 'onsubmit="showDetail(wallet01)"', but 'wallet01' is not a javascript variable.

I would suggest changing it to this:

<form onsubmit="return showDetail()">
    Wallet Number : <input type="text" name="wallet01" id="wallet01"  />
    <br />
    <input type="submit" id="submit" name="submit">
</form>

I added the "onsubmit" in the form, using the function with "return", to prevent the default submit from form. But remember to always return false in the function.

Than in the function you can get the value for the field.

    function showDetail() {
        var str = document.getElementById('wallet01').value;

        if (str=="") {
            document.getElementById("txtHint").innerHTML="";
            return false;
        }

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","process.php?q="+str,true);
        xmlhttp.send();

        return false;
    }

Or you can use the ajax from jQuery, it's easier. See an example here

    function showDetail() {
        var str = $('#wallet01').val();

        if (str=="") {
            document.getElementById("txtHint").innerHTML="";
            return false;
        }

        var jqxhr = $.ajax( {
                url: "example.php",
                type: "GET", 
                data: {q: str}
            }).done(function(data, textStatus, jqXHR ) {
                alert( "success" );
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert( "error" );
            }).always(function( ) {
                alert( "complete" );
            });

        return false;
    }

See the JQuery Ajax docs You also have the function "beforeSend" to start a gif "loading".