0

フォームの画像検証にjcaptchaを使用しています。フォームを送信する前に、javascriptを使用してajax呼び出しを行い、表示された画像に対応するユーザーが入力したテキストを検証します。結果を取得し、textbox（imageVerification）の値を更新します。このajax呼び出しを行う関数が実行された後、この更新されたばかりのテキストボックス（imageVerification）から結果の値を取得します。

問題は次のとおりです。このテキストボックス（imageVerification）から値を取得できません。常に空白として表示されます。

キャッチ：値を取得する前にalert（）を使用すると、値を正しく取得できます。これをfirebugデバッグモードで実行したところ、アラートを使用しなくてもデバッグモードで動作することがわかりました。

テキストボックス（imageVerification）の値が更新されるまでに遅延があるようです。そこで、setTimeout（）メソッドを導入して、値を取得することができました。

しかし、これが正しい解決策だとは思いません。javascriptが順番に実行されると仮定しています。それでは、メソッドによって更新された後に値を取得している私のステートメントが、すぐに取得できないのはなぜですか。画像の検証は成功しましたが、テキストボックスから結果の値を取得できないため、チェックに失敗しました。

また、ajax呼び出しの代わりに単純な関数を使用してtextbox（imageVerification）を更新する場合、この問題に直面することはありません。

これが私がajax呼び出しに使用しているコードです。

関数fetchContainerContent（url、containerid）{

var imageValue = document.forms['ratingForm'].elements['jcaptcha'].value;


    var req = false;
    var parameterString;

    if (window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    } else if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else {
        return false;
    }

    req.onreadystatechange = function() {
        requestContainerContent(req, containerid);
    }

    parameterString = "jcaptcha="+imageValue;
    req.open('POST', url, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    req.send(parameterString);

}

function requestContainerContent(req, containerid) {
    if (req.readyState == 4 && (req.status==200 || window.location.href.indexOf("http")==-1)){

    //document.getElementById(containerid).innerHTML = req.responseText
    //document.getElementById(containerid).value=req.responseText;
    document.forms['ratingForm'].elements[containerid].value = req.responseText;
    }




}

これは画像検証のための機能です：

関数validateImage（）{

if(isBlank(document.forms['ratingForm'].elements['jcaptcha'].value)){
    showError('',"Please enter the text seen in the image above",'jcaptchaError');
    return false;
}
 fetchContainerContent('captchaController','imageVerification');


 var obj = document.forms['ratingForm'].elements['imageVerification'];
//alert('val '+obj.value);
var vall = obj.value;
if(vall=='PASS'){
    return true;

}
else{
    showError('',"Image verification failed. Please refresh image and try again","jcaptchaError");
    return false;
}

}

fetchContainerContent（'captchaController'、'imageVerification'）の呼び出しを投稿すると、imageVerificationテキストボックスの値が設定されます。fetchContainerContent（'captchaController'、'imageVerification'）呼び出しの後にコメント化されたアラートボックスを使用すると、正常に機能します。

私を助けてください。どうもありがとう

4

1 に答える 1

0

更新された回答: 最初のパスでプログラム フローを読み間違えました。

validateImage()基本的な問題は、XMLHttpRequest が完了するまでに時間が必要な場合に、関数から即時応答 ( returntrue または false )を取得しようとしていることです。

に基づいて実行されるアクションをreturn独自の関数 ( validFunction、invalidFunction) に移動し、これを試してください。

function validateImage() {}
  if(isBlank(document.forms['ratingForm'].elements['jcaptcha'].value)){
      showError('',"Please enter the text seen in the image above",'jcaptchaError');
      return false;
  }

  var obj = document.forms['ratingForm'].elements['imageVerification'];

  validReq = fetchContainerContent('captchaController','imageVerification');
  validReq.onload = function () {
    var validResp = this.reponseText;
    if(validResp=='PASS'){
        validFunction();
    }
    else{
        showError('',"Image verification failed. Please refresh image and try again","jcaptchaError");
        invalidFunction();
    }
  }

  validReq.send(parameterString);
}

function fetchContainerContent(url, containerid) {
var imageValue = document.forms['ratingForm'].elements['jcaptcha'].value;
    var req = false;
    var parameterString;

    if (window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    } else if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else {
        return false;
    }

    parameterString = "jcaptcha="+imageValue;
    req.open('POST', url, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    return req;
}
于 2012-06-07T14:57:02.073 に答える