Form submits but no data present in console

Question

I am trying to make my first form using HTML and JS(vanilla). When I submit the form the console shows the form coming in but as I check through it, there appears to be none of the data i entered into the fields.

I have read through a number of the forum posts on here and other forum sites but most of the are using Jquery, React, or some other framework, I am super new to this and forms are already hard enough.

window.onload = () => {

    formID.addEventListener("submit" , (e) =>
    {
        console.log("form event listener activated");
        e.preventDefault();
        console.log("default prevented");
        console.log("formID: " , e);
        myModule.addToTable(e);

    });
}

function addToTable(e) {
  console.log("e " , e);
  console.log("e target " , e.target);
  console.log("e target.value " , e.target.value);

  console.log("this is a test, line 80 client.js");
}

<form id="FormID" class="FormClass" method='POST' action="#">
       <input class="inputClass" type="text" name='Name' placeholder="Name" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Model-Num' placeholder="Model Number" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Current-Stock' placeholder="Current Stock Amount" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Target-Stock' placeholder="Target Stock" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Reorder-Amount' placeholder="Reorder Amount" value=""/> <br/> <br/>


        <input type="submit" value="Submit"/> 
</form>

    

Result under the target area i see

textContent: "↵                ↵                ↵                ↵         

or

"↵↵↵↵↵↵↵↵↵↵"

I am of course wanting to get the actual values for my fields that were entered in the text box. Any help is absolutely appreciated.

Remember, I am super new, I do not understand a lot fo the backend DOM but I am trying to learn it.

Answer 1

The reason why it is not working is because you are using formID without even initializing the element to it. Try this instead

document.getElementById("FormID").addEventListener("submit" , (e) => { 
     //your code here
});

I also noticed that you use myModule in calling addToTable(e) which will cause error(based on that snippet) because myModule is undefined. Just call addToTable(e) directly. Check the working version of your code below

window.onload = () => {

    document.getElementById("FormID").addEventListener("submit" , (e) =>
    {
        console.log("form event listener activated");
        e.preventDefault();
        console.log("default prevented");
        console.log("formID: " , e);
        addToTable(e);

    });
}

function addToTable(e) {
  console.log("e " , e);
  console.log("e target " , e.target);
  console.log("e target.value " , e.target.value);

  console.log("this is a test, line 80 client.js");
}

<form id="FormID" class="FormClass" method='POST' action="#">
       <input class="inputClass" type="text" name='Name' placeholder="Name" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Model-Num' placeholder="Model Number" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Current-Stock' placeholder="Current Stock Amount" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Target-Stock' placeholder="Target Stock" value=""/> <br/><br/>
       <input class="inputClass" type="text" name='Reorder-Amount' placeholder="Reorder Amount" value=""/> <br/> <br/>


        <input type="submit" value="Submit"/> 
</form>