Question

I’m trying to begin learning AJAX, and I’ve already hit a little stump. So I’m starting simple and just trying to get an alert to pop up showing the length of the string the user types into a text field.

The HTML:

<form action="/scripts/addemail_fb.php" method="post">
<input type="text" name="email" value="Enter your email here!" />
<input id="submit" type="submit" name="submit" value="Go!"     onClick="check(this.form.email.value);"/>
</form>

The JS:

function check(email) {


    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    }


    else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }

    email=encodeURIComponent(email);

    req.open("POST","/scripts/addemail.php");

    req.setRequestHeader(
        'Content-Type',
        'application/x-www-form-urlencoded; charset=UTF-8');

    req.send(email);

    req.onreadystatechange=function() {

        if(req.readyState==4) {

            result = req.responseText;

            alert("The length of the email is:" + result);

        }

    }

    return false;

}

The PHP (addemail.php):

<?php
function check_email($input) {
     return strlen($input);
}
$email = urldecode(implode(file('php://input')));
$result = check_email($email);
echo $result;
?>

And yes, I’ve included the JS in the section. I got this almost directly from a tutorial so I’m not sure what’s going on. My testing browser is Safari, but I’ve also tried FF. Sorry is this is obvious, as this is my very first AJAX attempt. Thanks!

EDIT: Sorry, the problem is that its just going to the file described in action=”addemail_fb” instead of the JS.

-iMaster

Answer 1

Change the onclick handler to onsubmit (on the form), like so:

<form onsubmit="return check(this.email.value);"> ... </form>

Also, set your req.onreadystatechange before calling req.send ()