表单提交但控制台中没有数据

Question

我正在尝试使用 HTML 和 JS(vanilla) 制作我的第一个表格。当我提交表单时，控制台会显示进来的表单，但当我检查它时，似乎有 none 我输入到字段中的数据。

我已经阅读了这里和其他论坛网站上的许多论坛帖子，但大多数都在使用 Jquery、React 或其他一些框架，我对此非常陌生，表单已经有够难。

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>

结果在我看到的目标区域下

textContent: "↵                ↵                ↵                ↵

或

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

我当然想获得在文本框中输入的字段的实际值。非常感谢任何帮助。

请记住，我是超级新手，我不太了解后端 DOM 但我正在努力学习它。

Answer 1

它不起作用的原因是因为您在使用 formID 时甚至没有为它初始化元素。试试这个

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

我还注意到您在调用 addToTable(e) 时使用了 myModule，这会导致错误（基于该代码段），因为 myModule 未定义。直接调用addToTable(e)即可。检查下面代码的工作版本

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>

表单提交但控制台中没有数据

Form submits but no data present in console

html

javascript

forms

ecma

ecmascript-6