You have to delay your document.query... and document.getElement... until the page has loaded, the DOM elements only become aviable to scripting when the page has signalled that it has loaded in the browser, up until that point, all DOM elements are available to the script.
Three ways of doing this, first is the window.onload method and the other is to put the script at the end of the page or wrap them up in a function that is called at the end of the page. The best options are first and last, it means that your script will run when the page has fully loaded and you don't risk running a script that may return empty or null elements that should normally be available.
Web forms do not use ID's they use name, action,method and enctype tags, options use <select> tags and <option> tags use value, the data attribute method is not backwards compatible with those who still today use older browsers.The submit button should be named and have a value. If you use a web form and its elements properly as well as HTML, your need for scripting will be limited and less reliance on scripting has its benefits.