2011-03-08 12 views
0

私は、ナビゲーションバーの別のフィールドをクリックすると、別のフィールドをクリックすると、Webページのメインdivを変更するために(基本的なチュートリアルで最も簡単な方法で)ajaxを使用しましたデータまたはフォームは同じdivに表示されます。ajaxとjavascriptフォームのバリデーション

私はajaxで私のページにロードされている要素でjavascriptを使って最も簡単なフォームの検証をしようとすると、それはうまくいかないので、明らかにajaxの理解に問題があります。たとえば、チェックボックス(未チェック)と送信ボタンにはajaxがロードされます。チェックボックスがオンになっているかどうかを確認するには、チェックボックスをオンにして送信ボタンをクリックするだけです。何も表示されないか、チェックされません。

私はajaxなしで同じ例(チェックボックス+送信)を試してみましたが、うまく動作します。

この状況で私が見逃したロジックはありますか?

ありがとうございます!

編集:申し訳ありません、コードを投稿してください。 ここにあります。私のAjaxコード:私はアヤックスでロード

function loadWholePage(url) 
{ 
    var y = document.getElementById("storage"); 
    //var x = document.getElementById("displayed"); 
    var x = document.getElementById("content"); 
    loadHTML(url, processHTML, x, y); 
} 

function loadHTML(url, fun, storage, param) 
    { 
var xhr = createXHR(); 
xhr.onreadystatechange=function() 
{ 
    if(xhr.readyState == 4) // The request is complete 
    { 
     //if(xhr.status == 200) 
     { 
      storage.innerHTML = getBody(xhr.responseText); 

      fun(storage, param); 
     } 
    } 
}; 


xhr.open("GET", url, true); 
xhr.send(null); 
    } 

function getBody(content) 
{ 
test = content.toLowerCase(); // to eliminate case sensitivity 
var x = test.indexOf("<body"); 
if(x == -1) return ""; 

x = test.indexOf(">", x); 
if(x == -1) return ""; 

var y = test.lastIndexOf("</body>"); 
if(y == -1) y = test.lastIndexOf("</html>"); 
if(y == -1) y = content.length; // If no HTML then just grab everything till end 

return content.slice(x + 1, y); 
} 

Htmlのファイル:

<html> 
<body> 
<form> 
<input type="checkbox" name="values" value="" id="chk3" /> 
<select name="select3" class="test" style="width:7em;" id="select3"> 
<option VALUE="">0-100</option> 
<option VALUE="/tags/">100-200</option> 
<option VALUE="/"> 200-300</option> 
<option VALUE="/"> 300-400</option> 
<option VALUE="/"> 400-500</option> 
</select> 
<input type="button" class="submit" id="testbutton" style="width:12em;" value="submit" onClick="testIt();"> 
</form>        
</body> 
</html> 

私が使用してそれを読み込む:

<li onClick='setSelectedListElement(this);'> 
<a onclick="loadWholePage('test.html');">TEST 
</a> 
</li> 

そして、チェックボックスがチェックされているかどうかを確認する必要があり、本当に原始的なスクリプトをオン:)

<script type="text/javascript"> 
function testIt(){ 
var x=document.getElementById("chk3").checked; 
alert(x); 
} 
</script> 
+1

いくつかのコードを投稿できますか? – Neal

+0

新しいコンテンツが始まる前に実行されたjQueryセレクタを使用して、不適切な(DOMによって認識されない)要素が追加され、更新されたDOMを反映しないコードを知っていますが、それと関係があります。 –

+0

I編集済み私の元の投稿、それは問題ではないことを願っています。ありがとう! – Newman1510

答えて

0

あなたのページが読み込まれ、右クリック - >ソースの表示と実行時に生成されたコントロールのIDを確認してください。 コントロール(チェックボックスなど)のIDを使用して、検証がトリガーされているかどうかを確認してください。

関連する問題