Cannot Read Property 'Elements' of Undefined - in JS Console
23,651
Try
document.getElementById('importSampleDataForm').elements.length
Also, nested forms are not allowed, so that also needs to be resolved.
Author by
TheLettuceMaster
Android (Java) Developer for fun, and Professional Full Stack Developer using python, ruby, JavaScript, SQL and php.
Updated on October 26, 2020Comments
-
TheLettuceMaster over 3 years
HTML form (outputed thru PHP)
$retVal .= "<form id= 'importSampleDataForm' name = 'importSampleDataForm' onsubmit = \"return false\" >\n"; // Form content edited out; it contains several dozen checkboxes $retVal .= sprintf("<input type='button' class='wn_button' onclick='SaveMotorSkills();' value='Import Selected'>\n"); $retVal .= "</form>\n";
JavaScript / Ajax
function SaveMotorSkills() // {{{ { // {{{ Ajax Header var httpRequest = CreateHttpRequest(); if (!httpRequest) { DialogFail('AJAX initialization error. ', 1 ); return false; } // }}} var params = '_SaveMotorSkills=1'; for(i=0; i<document.importSampleDataForm.elements.length; i++) // line with error { params += "&" + document.importSampleDataForm.elements[i].name + "=" + document.importSampleDataForm.elements[i].value ; } // edit out AJAX setup httpRequest.send(params); DialogSave("Saving..."); } // }}}
See "Line With Error Above" in
for
loop. JS Console saysUncaught TypeError: Cannot read property 'elements' of undefined
I have looked at this code so much my eyes can't take it anymore. Does anyone else see anything I don't? I can add more code if needed.
-
Nahydrin over 10 yearsAre you running the function
SaveMotorSkills
from the footer, or after the page/html is on the screen? You should be. -
TheLettuceMaster over 10 yearsIt is run from a separate
.js
document and the form is already displayed on the screen. When you click the button on bottom of form, this is when it is ran.
-
-
TheLettuceMaster over 10 yearsthat gives me new error:
Uncaught TypeError: Cannot read property 'elements' of null
-
Patrick over 10 years@KickingLettuce, When does
SaveMotorSkills
run? The new error is still on the same line, right? -
TheLettuceMaster over 10 yearsI added this answer above in comments.
-
Patrick over 10 yearsAre you in Chrome? Try this: 1) load up web page. 2) press F12 3) click Console 4) run document.getElementById('importSampleDataForm').elements.length; and see what that gives you there.
-
TheLettuceMaster over 10 yearsIt says same thing as my first comment; 'null'
-
Patrick over 10 yearsTry just
document.getElementById('importSampleDataForm');
maybe the html code isn't appearing on the page. -
TheLettuceMaster over 10 yearsThat says
null
as well. When I inspect element; the correct form is there with the correct id/name. The script isn't being ran until AFTER page has been loaded and then only if button is clicked. -
TheLettuceMaster over 10 yearsI just noticed, this form is inside a form; would that cause the issue? I removed the inner form and used the name of the outer form, now it seems to find it.
-
Patrick over 10 yearsYou got it. Nested forms are not allowed, stackoverflow.com/questions/379610/can-you-nest-html-forms
-
TheLettuceMaster over 10 yearsYou can add that as your answer and I will select.