Javascript call php file.

I hope its possible. Here's what I want to achieve. I have a register form that has fields for user info. and a button, in button onclick arguments it will call a javascript function. This function will check if the password field and confpassword field are the same if so call a php file where it has a function that check if the username inputted by the user already exist in the database if so prompt a message that username already used.

How can I do that?

Thanks in advance guys.

You want to look at AJAX.

Code:

---

<script language="javascript" type="text/javascript">
function createRequestObject()
{
        var request_o; //declare the variable to hold the object.
        var browser = navigator.appName; //find the browser name
        if(browser == "Microsoft Internet Explorer"){
                /* Create the object using MSIE's method */
                request_o = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
                /* Create the object using other browser's method */
                request_o = new XMLHttpRequest();
        }
        return request_o; //return the object
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleThoughts(){
        /* Make sure that the transaction has finished. The XMLHttpRequest object
                has a property called readyState with several states:
                0: Uninitialized
                1: Loading
                2: Loaded
                3: Interactive
                4: Finished */
        try
        {
                if(http.readyState == 4){ //Finished loading the response
                        /* We have got the response from the server-side script,
                                let's see just what it was. using the responseText property of
                                the XMLHttpRequest object. */
                        var response = http.responseText;
                        //alert(response);
                        if(response!="ok")
                        {
                                alert("Please select another username!");
                        }
                }
        }
        catch(Exception)
        {
        }

}

var http = createRequestObject();
function checkUsername(userName)
{
        http.open('get', 'yourscript.php?username=' + userName);
        http.send(null);
}
</script>

<form>
        <input type="text" name="uname" id="uname" />
        <input type="button" onclick="javascript:checkUsername(document.getElementById('uname'));"/>
</form>

---

Note: your PHP script will have to return "ok" if the username is ok and anything else if it is not.

I'll explain that a little - Since the PHP function is on the server, you need to do a request to get PHP to run. The XMLHttpRequest object is what does that for you without having to refresh the page, it runs in the background and waits for the response. Meanwhile the response is generated by your PHP script, which is where the function runs - and then you process that response once you get it on the client side in your Javascript.

"AJAX" is just a fancy name for a combination of several technologies - HTTP, Javascript, and XML primarily. You don't even need the XML part, it's just convenient to send the response in that format if you have a lot of variable-amount data being returned.

Thanks john and pen for the response.

Question: So all I need is declare a variable in php file for the user name then evaluate it?about this one? http.open('get', 'yourscript.php?username=' + userName);. Does it mean that yourscript.php file has a variable name username?
also the function handleThoughts() I can't see where it was called?sorry for asking this question i'm very new at this thingy.

Requesting pages via Javascript, makes your server side applications kind of event driven.

Your server side script receives the variables in exactly the same way as it would normaly. (you can also send via post):

Code:

---

xmlHTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHTTP.send('username=blah&password=blah');

---

The variables will be visible in PHP via the $_POST and $_GET.

Unless your call to the server is part of the page load. You should make the request ansynchronously. This will ensure that should it time out the user is not sat their waiting for a hanging script.

Code:

---


// use a callback function to get the response
xmlHTTP.onreadystatechange = function()
{
    if (xmlHTTP.readyState != 4) return; // response is not reay until it is 4

    if (xmlHTTP.status == '200') {
        alert(xmlHTTP.responseText); // the body of the response is now avaialable
    }
}

xmlHTTP.send(null);

---

Check out the Ajax link in my sig, I've posted a sample app which sends form variables via Javascript and validates an email address.