2011-09-02 6 views
1

非常に簡単なエラー、私は確信しているが、基本的に私はそうのようにそれを呼び出しID formIDとイムでフォームを持っている:getElementByIdの後にnullがありますか?ここ

<script type="text/javascript"> 
    function redvalidate() { 
     var form = document.getElementById("formID") 
     var fields = form.getElementsByClassName("validate"), 

そして、私はエラーになっています:form is null

ことができます誰にもエラーを見つけますか?

(PSフォームのONSUBMITそれを呼び出す)

UPDATE [OK]をので、基本的に、私はoviously doesntの仕事一の形態のための2つをonSubmitを有します。それでは、私がやっていることは別の内からこの関数を呼び出している...

HERESにformタグ:

<form name="purchaseform" id="formID" onSubmit="RememberFormFields('purchaseform','name,email,ship_to,phone_extension,pi_name');" action="process.php" method="post" enctype="multipart/form-data"> 

そして相続人RememberFormFields:

<script type="text/javascript"> 
function RememberFormFields(form,list) 
{ 
redvalidate() 

...etc... rememberformfields function ...et.c.. 
+0

あなたは 'formId' idを持つ要素を持っていますか? –

+5

周囲のJavascriptの残りの部分を表示できますか?最も可能性の高い原因は、DOMが準備が整う前にコードが実行され、 'formID'がまだ利用できないということです。 – lonesomeday

+0

@loneomeday update –

答えて

1

をどこかにHTML <form id="formID"...を持っていると仮定すると、 DOMの準備が整うまで、javascriptの読み込みを延期するだけです。 DOMにまだ適用されていない要素からIDを取得しようとしているため、JavaScriptはそれをNULLとして認識します。

これを達成する方法はたくさんあります。すべてのJSを</body>タグの近くに置くことができます。Google's suggested deferred javascript loading practiceを使用して、すべてのJSを<head>のボディの下から追加することができます。

$(document).ready(function(){});ブロックにコードをラップすることができるので、DOMを操作するスクリプトはいつでも動作します。なぜなら、DOMは起動前に作成されるまで待機するからです。現代のブラウザでは "DOMContentLoaded"イベントを探してこれを実現し、IEのために何度もスクロールしようとするdoScrollCheck()の機能を持っています。スクロール可能な場合、それは良いことです。このためにJQueryをロードしたくない場合は、このプラクティスを簡単に複製できます。

jQueryのDOM準備チェック:

if (document.addEventListener) { 
    DOMContentLoaded = function() { 
     document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false); 
     jQuery.ready(); 
    }; 

} else if (document.attachEvent) { 
    DOMContentLoaded = function() { 
     // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). 
     if (document.readyState === "complete") { 
      document.detachEvent("onreadystatechange", DOMContentLoaded); 
      jQuery.ready(); 
     } 
    }; 
} 

// The DOM ready check for Internet Explorer 
function doScrollCheck() { 
    if (jQuery.isReady) { 
     return; 
    } 

    try { 
     // If IE is used, use the trick by Diego Perini 
     // http://javascript.nwbox.com/IEContentLoaded/ 
     document.documentElement.doScroll("left"); 
    } catch(e) { 
     setTimeout(doScrollCheck, 1); 
     return; 
    } 

    // and execute any waiting functions 
    jQuery.ready(); 
} 

return jQuery; 

})(); 
+0

@AkuebWebguyが更新されましたが、フォームが送信されるまで呼び出されません。 –

+0

あなたのHTMLを投稿できますか? – AlienWebguy

+0

私の質問を更新する –

0

これが原因DOMオブジェクトがロードされる前に実行取得機能でのみです。 bodyタグの "onload"関数を使用して関数を呼び出します。または、すべてを処理するjQueryの$(document).ready()関数を使用します。

2

彼はフォームの送信時に関数を呼び出しているので、関数が呼び出されたときにフォームが確実に読み込まれています。 (http://jsfiddle.net/HaajY/を参照してください)

私はむしろ、そのようなidのようなスペルミスのために行くでしょう。 しかし、問題を見つけることができるようにするには、さらに多くを見る必要があります。

更新: 要素を関数のパラメータとして渡す必要があります。

これは動作します:

<script type="text/javascript"> 
function redvalidate(elem) { 
var fields = elem.getElementsByClassName("validate") 
alert(fields) 
} 

function RememberFormFields(elem,form,list) 
{ 
    redvalidate(elem); 
} 
</script> 
<form name="purchaseform" id="formID" onSubmit="RememberFormFields(this,'purchaseform','name,email,ship_to,phone_extension,pi_name');" method="post" enctype="multipart/form-data"> 
    <input type="submit"/> 
</form> 

は、ここでは、アクションでそれを参照してください。 http://jsfiddle.net/HaajY/2/

+0

+1あなたは私よりもOPの質問をよく読んでいるでしょう、あなたはおそらくこのことを正しく表しています:) – AlienWebguy

+0

@Jonathan Updated q –

+0

主な回答が解決策で更新されました;-) –

関連する問題