2011-09-02 4 views
1

Очень простая ошибка здесь, я уверен, но в основном у меня есть форма с идентификатором formID и им называть его так:Является ли null после getElementById?

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

И я получаю ошибку: form is null

Может

никому определить ошибку?

(PS назвав его onsubmit из формы)

UPDATE Ok поэтому в основном у меня есть два onsubmit для одной формы, которая oviously не работает. Так что я делаю, вызов этой функции из другой ...

Heres форма тег:

<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"> 

И Heres RememberFormFields:

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

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

У вас есть элемент с идентификатором 'formId'? –

+5

Можете ли вы показать остальную часть окружающего Javascript? Наиболее вероятной причиной является то, что код запускается до того, как DOM готов, и поэтому 'formID' пока недоступен. – lonesomeday

+0

@lonesomeday update –

ответ

1

Предполагая, что у вас есть HTML <form id="formID"... где-то на вашей странице, вам просто нужно отложить загрузку вашего javascript до тех пор, пока DOM не будет готова. Вы пытаетесь получить идентификатор из элемента, который еще не был применен к DOM, и поэтому JavaScript видит его как NULL.

Существует много способов достичь этого. Вы можете поместить все свои JS рядом с тегом </body>, вы можете использовать Google's suggested deferred javascript loading practice, который добавляет все ваши JS к <head> со дна тела.

Это одна из причин, по которой JQuery настолько удобен, что вы можете обернуть свой код в блоке $(document).ready(function(){});, чтобы все сценарии, управляющие DOM, всегда работали, потому что они ждут, пока DOM будет создан до их запуска. Он достигает этого, ища событие «DOMContentLoaded» в современных браузерах и имеет функцию doScrollCheck() для IE, которая пытается прокручивать тело снова и снова - если она прокручивается, они знают, что это хорошо. Вы можете легко воспроизвести эту практику, если вы не хотите загружать 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. Используйте функцию «onload» тега body, чтобы вызвать вашу функцию. Или используйте функцию jQuery $ (document) .ready(), которая заботится обо всем.

2

Он вызывает функцию при отправке формы, поэтому форма определенно была загружена при вызове функции. (см. Здесь http://jsfiddle.net/HaajY/)

Я предпочел бы обратиться за ошибкой в ​​идентификатор или что-то в этом роде. Чтобы увидеть проблему, вам нужно больше узнать.

Обновление: Вам необходимо передать элемент в качестве параметра функции.

это будет работать:

<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 Обновлено мой q –

+0

главный ответ обновлен решением ;-) –

Смежные вопросы