value（）和focus（）不起作用

Question

So I'm working on a game that loads dynamically with JS / PHP. My only problem is I can't get my JS captcha code to grab the value of the chosen text area (cAnswer) to send it to do.php from botcheck.php to check if the captcha was entered correctly.

.focus() doesn't focus in on the cAnswer text input either.

Here are my codes...

TieSCRIPT.JS

Tie = function() { };

Tie.id = function (what) { // Shortens the document.getElementById() function
    return document.getElementById(what);
}

Tie.enc = function (what) { // Encoding URL stuff
    return encodeURIComponent(what);
}

Tie.deco = function (what) { // Then Decoding the reply
    return decodeURIComponent(what);
}

Tie.loadDiv = function(where,url,data) {
    //clearTimeout(timer);
    var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else { // Crap IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }   
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                Tie.id(where).innerHTML = xmlhttp.responseText;
            } else {
                return false;
            }
        }   
        if (!data) {
            data = "";
        }
        data = data.replace(/: /gi, "=");
        data = data.replace(/:/gi, "=");
        data = data.replace(/, /gi, "&");
        data = data.replace(/,/gi, "&");    
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

Tie.request = function (url, data) { // Ajax request
    var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else { // Crap IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }   
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                data = xmlhttp.responseText.split("|");                 
                    for (i = 0; i < data.length; i++){
                        var one = Tie.deco(data[parseInt(i)]);
                        var two = Tie.deco(data[parseInt(i) + 1]);
                        var three = Tie.deco(data[parseInt(i) + 2]);
                        var four = Tie.deco(data[parseInt(i) + 3]);
                        var five = Tie.deco(data[parseInt(i) + 4]);

                            if (window.Tie[one]) { // echo out a Tie.* command from php file.
                                window.Tie[one](two,three,four,five);
                            }
                    }       
            } else {
                return false;
            }
        }
        if (!data) {
            data = "";
        }
        data = data.replace(/: /gi, "=");
        data = data.replace(/:/gi, "=");
        data = data.replace(/, /gi, "&");
        data = data.replace(/,/gi, "&");


    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

Tie.alterDiv = function(where,what) { // Shortening again.
    if (Tie.id(where)) {
        Tie.id(where).innerHTML = what;
    }
}


Tie.getCaptcha = function () {
    Tie.loadDiv("popUp","botcheck.php");
    Tie.id("cAnswer").focus();
}

Tie.submitCaptcha = function () {
    var answer = Tie.enc(Tie.id("cAnswer").value);
    Tie.request("do.php", "p: submitCaptcha, a: " + answer);
    Tie.enc(Tie.id("cAnswer").value = "");
}

BOTCHECK.PHP

<?php
    include('connect.php');
?>
 <div id="popUpBotContent">
    <center>
         <p>Please enter the WHITE numbers only...</p><br />
        <div id="captchaPicture"><img src="validate.php" width="120" height="60" id="captcha"></div><br />
        <input type="text" id="cAnswer" size="5" maxlength="3" onkeydown="if (event.keyCode == 13) { Tie.submitCaptcha(); fade('popUpBotContent'); return false; }"  />
        <input type="submit" onClick="Tie.submitCaptcha();slide('popUpBotContent');" value="Submit" />
        <br /><br />
    </center>
</div>

DO.PHP

<?php
    include('connect.php');

    $a = $_POST['cAnswer'];
    $lastAction = $info['last_action'];
    $lastActionTime = $info['user_timer_end'];
    $now = time() - 180;

    IF (isset($_POST['cAnswer'])) { $p = "submitCaptcha"; } else { $p = "none"; }

        IF ($p == "submitCaptcha" && $a == $info['bot_num']) { // captcha
                $botTime = time() + 900 + rand(60,300);
                mysql_query("UPDATE `user_info` SET `next_botcheck` = '$botTime' WHERE `user_id` = '$info[user_id]'");
                mysql_query("UPDATE `user_info` SET `botcheck` = '0' WHERE `user_id` = '$info[user_id]'");
                $newTime = date("H:i", $botTime);
                echo "alterDiv|botTime|$newTime|";
        } else IF ($p == "submitCaptcha" && $a != $info['bot_num']) { // captcha
            echo "getCaptcha|";
        }
?>

I know that's quite a bit to go through, but any input would be greatly appreciated. Hope I didn't leave anything out.

Let me know if more info is needed.

Thanks!

Answer 1

Ok, so the focus does not work because when you call it the element does not exist. You generate the element with ajax, witch is asynchronous. When you focus it, it is not yet generated.

I suggest you add in your loadDiv a new input with a function name and that will act as a callback, and you can call this after the content is added to the page.

I think you have for value the same flow problem.

Just for testing if this really is the problem : add the asynchronous option to false for the xmlhttp requests.