Нуль после getElementById? - PullRequest
Новая
       8

Нуль после getElementById?

1 голос
/ 03 сентября 2011

Очень простая ошибка, я уверен, но в основном у меня есть форма с идентификатором formID, и я называю ее так: 

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

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

Может кто-нибудь заметить ошибку?

(PS, называя это отправкой формы)

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

Вот тег формы: 

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

И вот помните поля формы: 

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

...etc... rememberformfields function ...et.c..

Ответы [ 4 ]

2 голосов
/ 03 сентября 2011

Он вызывает функцию при отправке формы, поэтому форма определенно была загружена при вызове функции.(см. здесь 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/

1 голос
/ 03 сентября 2011

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

Есть много способов достичь этого. Вы можете поместить все свои JS рядом с тегом </body>, вы можете использовать Рекомендуемую Google процедуру отложенной загрузки JavaScript , которая добавляет все ваши JS к <head> в нижней части тела.

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

Проверка готовности DOM JQuery: 

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 голосов
/ 25 января 2019

Вы также можете иметь вложенные формы, формы внутри формы. 

<form>
    <form id="nested-form">
        <!-- html -->   
    </form>
</form>

В этом случае вложенная форма не распознается с помощью document.getElementById("nested-form"), и функция вернет null.

0 голосов
/ 03 сентября 2011

Это только потому, что функция выполняется перед загрузкой объекта DOM. Используйте функцию «onload» тега body для вызова вашей функции. Или используйте функцию jQuery $ (document) .ready (), которая обо всем позаботится.

...